如何使进度条在选中的多个复选框上工作？

Question

我在选中的复选框上增加了进度条。它适用于单组复选框，但对于多组复选框，它不能按方面工作。

我想要什么

如果我使用多张卡，并且每张卡中会有多个复选框，它们都应该单独工作

$('.card').each(function(index, el) {
  // console.log( $(this).find('input[type="checkbox"]').length );
  var chkLength = $(this).find('input[type="checkbox"]').length;
  var max = 100;
  var div = max / chkLength;

  $('.scrumboard .card .task-quantity').text('0/' + chkLength);

  // $(this).find('input[type="checkbox"]').append("<div>" + div +" </div>");
  $(this).find('input[type="checkbox"]').attr('value', div);
});

// Progress bar code
val = 0;
$('.card .new-control-input').on('change', function(event) {
  if ($(this).is(':checked')) {
    console.log('chk');
    // perc += parseInt($(this).val());
    // $(this).attr('checked', '');
    console.log(val += parseInt($(this).val()));
  } else {
    console.log('nchk');
    console.log(val -= parseInt($(this).val()));
  }

  $(".progress .progress-bar").each(function(index, el) {
    $(this).css("width", val + "%");
  });
})

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>
<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bgbbg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>

链接

Answer 1

问题是因为当复选框change 事件触发时，您正在更新所有 DOM 中的.progress .progress-bar 元素。相反，您需要使用 DOM 遍历来查找与引发事件的复选框相关的进度条。为此，您可以使用closest() 获取父级.card，然后使用find()。

您还需要单独维护每个 width，而不是共享的 val 变量。为此，您可以使用直接存储在进度条上的data 属性。试试这个：

$('.card').each(function(index, el) {
  var chkLength = $(this).find('input[type="checkbox"]').length;
  var max = 100;
  var div = max / chkLength;
  $('.scrumboard .card .task-quantity').text('0/' + chkLength);
  $(this).find('input[type="checkbox"]').attr('value', div);
});

$('.card .new-control-input').on('change', function(event) {
  var $checkbox = $(this);

  $checkbox.closest('.card').find(".progress .progress-bar").css("width", function() {
    var width = $(this).data('width') || 0;
    if ($checkbox.is(':checked')) {
      width += parseInt($checkbox.val());
    } else {
      width -= parseInt($checkbox.val());
    }
    $(this).data('width', width);
    return width + "%";
  });
})

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>

<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bgbbg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>