Question

我目前正在使用jQuery的进度条，根据复选框更改内部进度条。

下面的脚本工作得非常好，除了我重新加载页面时，进度条为空，复选框仍然激活。

这可能是由于函数不计入已选中复选框的数量，但使用函数checkbox.change（）开始计算。

我现在的问题是如何配置脚本以便在页面重新加载时更新进度条。

提前多多感谢！

JQuery脚本：

$( document ).ready(function() {
    var checkbox = $(":checkbox"),
    checkbox_length = checkbox.length;

    checkbox.change(function () {
        var that = $(this),
            progress = 0,
            checked_length = 0;

        if(that.is(':last-child')) {
              that.siblings().attr('checked', true);
        }

        checked_length = $(":checkbox:checked").length;
        progress = Math.round(checked_length / checkbox_length * 100);

        $('.bar').animate({'width' : progress + '%'}, 400);
        $(".progresstext").html(progress + '%');
        $.cookie('cookieProcessLevelProgress', progress, { expires: 7, path: '/' });
    });
});

HTML code：

 <div class="meter"><div class="bar"></div></div><span class="progresstext"></span>

Answer 1

有关您的信息，您可以关联HTML5进度标记，而不是将jQuery与其关联。假设您使用<progress>标记，例如<progress value="6" max="10">，然后使用基本JavaScript更新内部参数。对我来说，代码看起来有点像这样：

<div id="content">
<progress value="2" max="10">
</div>

最后一位是onClick of checkbox，使用x ++将x的值从2更新为3。接下来使用document.getElementById("content").innerHTML更新代码，这就是繁荣，它应该工作。

快乐的编码。

Answer 2

我无法弄清楚你的代码的一小部分，但我在下面粘贴的是一个好的开始...基本上将进度条的“设置”放入一个函数（DRY）然后调用它页面加载，以及复选框更改：）

function setProgress( $checkboxes ) {

  var chk_length = $checkboxes.filter(":checked").length;
  var progress = Math.round(chk_length / $checkboxes.length * 100);

  $('.bar').animate({'width' : progress + '%'}, 400);
  $(".progresstext").html(progress + '%');

};

$(function() {

  var $checkboxes = $(":checkbox");
  setProgress( $checkboxes );

  $checkboxes.change(function(e) {
    $(this)
        .prevAll(":checkbox")
        .prop("checked",true)
        .end()
        .nextAll(":checkbox")
        .prop("checked",false);

    setProgress( $checkboxes );
  });


});

甚至在页面重新加载上更新jQuery Progress Bar

2 个答案: