0

我目前正在使用 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 代码：

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

2 回答 2

0

我无法真正弄清楚您的代码的一小部分，但是我在下面粘贴的是一个好的开始...基本上将进度条的“设置”放入一个函数（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 );
  });


});
于 2013-09-01T16:47:43.653 回答
0

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

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

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

快乐编码。

于 2013-09-01T16:27:32.683 回答