如何基于页面可动态增减的按钮状态创建动态进度条？

我明白你的痛点——原来的进度计算依赖手动设置的固定系数，每次按钮数量变化都要改代码，太麻烦了。咱们可以通过动态统计总有效按钮数来实现自动计算进度，完全不用手动调整系数。

问题根源分析 #

你当前的代码里var total = i * 4;，这里的4其实是100 ÷ 总按钮数的固定值（比如25个按钮时100/25=4）。但按钮数量动态增减时，这个系数就和实际总数不匹配了，导致进度计算错误。

正确的逻辑应该是：

进度百分比 =（处于「Revisit」状态的按钮数 ÷ 总有效可交互按钮数）× 100

修改后的完整JS代码 #

$(document).ready(function() {
    // 页面加载时初始化进度条
    setProgressBar();

    // 监听按钮点击，状态变化后实时更新进度条
    $('input[type=submit]').on('click', function(e) {
        // 注意：如果你的表单是通过AJAX提交，保留下面的阻止默认行为；如果是刷新页面提交，可移除这行
        e.preventDefault();
        
        // 模拟按钮状态切换（实际业务中请替换为后端返回更新后的状态逻辑）
        const currentVal = $(this).val();
        $(this).val(currentVal === 'Revisit' ? 'Visit' : 'Revisit');
        
        // 更新进度条
        setProgressBar();
    });

    function setProgressBar() {
        // 统计已完成（Revisit状态）的按钮数量
        const completedButtons = $('input[type=submit][value="Revisit"]').length;
        // 统计所有有效可交互的按钮（排除禁用的按钮，因为它们无法改变状态）
        const totalValidButtons = $('input[type=submit]:not(:disabled)').length;

        // 计算百分比，处理除数为0的边界情况
        let percent = totalValidButtons > 0 ? Math.floor((completedButtons / totalValidButtons) * 100) : 0;
        // 确保百分比不超过100%
        percent = Math.min(percent, 100);

        // 更新进度条样式和文本
        $(".progress-bar").css("width", `${percent}%`).text(`${percent}%`);
    }
});

关键改动说明 #

1. 动态统计总按钮数：
   用$('input[type=submit]:not(:disabled)').length自动获取所有可切换状态的有效按钮，排除了HTML中禁用的「Feature Not Enabled」按钮，这些按钮不参与进度计算。
2. 自动计算百分比：
   用(完成数 / 总数) * 100替代固定系数乘法，不管按钮数量是23还是30，都能自动算出正确的进度百分比。
3. 实时动态更新：
   添加了按钮点击事件监听，当按钮在「Visit」和「Revisit」之间切换时，立即调用setProgressBar()更新进度，解决了原来缺乏动态性的问题。
4. 边界情况处理：
   增加了totalValidButtons > 0的判断，避免页面没有有效按钮时出现除以0的错误；同时用Math.min(percent, 100)确保进度不会超过100%。

适配你的HTML结构 #

你的HTML中，禁用的按钮是<button>标签而非<input type=submit>，所以$('input[type=submit]:not(:disabled)')会自动忽略这些禁用按钮，无需额外调整。如果后续HTML结构变化，比如禁用按钮改用input标签，记得保留:not(:disabled)筛选条件即可。

内容的提问来源于stack exchange，提问作者user11945300