如何通过每个数组值更改多个元素？

Question

当我选中我的复选框然后单击“标记为完成”按钮时，status_result 将更改为done。当我为每个单曲做这件事时，它就起作用了。但是，如果我检查所有内容，则不会。那么只有一个 status_result 正在改变：

$('.productdetails-table input[type="checkbox"]').change(function () {
        var unchecked = [];
        $.each($("input[type='checkbox']:checked"), function () {
            unchecked.push($(this).val());
        });
        $(".selected-products").val(unchecked.join(", "));
    });

  
$(document).on('click', '.edit-done', function () {
    var array = $('.selected-products').val().split(",");
        $.each(array,function(i){
            $(".productdetails[data-product_id='" + array[i] + "']").find(".status_result").html('<span style="background-color: #00c0ef" class="label label-primary">done</span>');    
        });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="pull-right" style="padding:6px 8px; margin-right:-5px;">
      <button style="display: block;" type="button" class="edit-checked edit-done btn btn-block btn-info"><i class="fa fa-check-square-o" aria-hidden="true"></i>Mark as "done"</button>
 </li>
                            
 <input name="selected-products" class="selected-products" type="text">
<table class="productdetails-table table table-bordered table-hover " style="cursor:pointer">
<tbody>
<tr>
   <th>Check</th>
   <th>Status</th>
</tr>

<tr class="productdetails" data-product_id="93"><td><input class="check-parent" value="93" type="checkbox"></td><td class="status_result detail"  ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>
<tr class="productdetails" data-product_id="92" data-table="productdetails"><td class="check close_sidebar"><input value="92"  type="checkbox"></td><td class="status_result" ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>

Answer 1

问题是由逗号后添加的额外空格引起的。如果您将$(".selected-products").val(unchecked.join(", ")); 更改为$(".selected-products").val(unchecked.join(","));，那么它将起作用。

$('.productdetails-table input[type="checkbox"]').change(function () {
        var unchecked = [];
        $.each($("input[type='checkbox']:checked:not(#checkAll)"), function () {
            unchecked.push($(this).val());
        });
        $(".selected-products").val(unchecked.join(","));
    });

  
$(document).on('click', '.edit-done', function () {
    var array = $('.selected-products').val().split(",");
        console.log(array)
        $.each(array,function(i){
            $(".productdetails[data-product_id='" + array[i] + "']").find(".status_result").html('<span style="background-color: #00c0ef" class="label label-primary">done</span>');    
        });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="pull-right" style="padding:6px 8px; margin-right:-5px;">
      <button style="display: block;" type="button" class="edit-checked edit-done btn btn-block btn-info"><i class="fa fa-check-square-o" aria-hidden="true"></i>Mark as "done"</button>
 </li>
                            
 <input name="selected-products" class="selected-products" type="text">
<table class="productdetails-table table table-bordered table-hover " style="cursor:pointer">
<tbody>
<tr>
   <th>Check</th>
   <th>Status</th>
</tr>

<tr class="productdetails" data-product_id="93"><td><input class="check-parent" value="93" type="checkbox"></td><td class="status_result detail"  ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>
<tr class="productdetails" data-product_id="92" data-table="productdetails"><td class="check close_sidebar"><input value="92"  type="checkbox"></td><td class="status_result" ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>

Answer 2

我感觉您可能不熟悉浏览器中内置的 JavaScript 调试器。如果你学会了如何使用调试器，你可以在几秒钟内找到这样的问题，而不是被难住而不得不在 Stack Overflow 上提问。

您可以立即开始。以下是您的 sn-p 副本，其中在战略位置添加了 debugger; 声明。

在浏览器中打开开发者工具，然后运行 ​​sn-p。选中两个复选框并单击按钮。它将在debugger; 语句处停止。在 Chrome 中，您应该会看到这样的面板：

现在仔细查看Local 下的值，您将看到array 中的值。 "93" 看起来是正确的，但 " 92" 前面有一个空格，这可能会让您立即跳出来。

这是更新后的 sn-p；尝试一下，看看你能发现什么，然后在下次遇到这样的谜题时使用调试器。

$('.productdetails-table input[type="checkbox"]').change(function () {
        var unchecked = [];
        $.each($("input[type='checkbox']:checked"), function () {
            unchecked.push($(this).val());
        });
        $(".selected-products").val(unchecked.join(", "));
    });

  
$(document).on('click', '.edit-done', function () {
    var array = $('.selected-products').val().split(",");
    debugger;  // This will stop in the JavaScript debugger
        $.each(array,function(i){
            $(".productdetails[data-product_id='" + array[i] + "']").find(".status_result").html('<span style="background-color: #00c0ef" class="label label-primary">done</span>');    
        });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="pull-right" style="padding:6px 8px; margin-right:-5px;">
      <button style="display: block;" type="button" class="edit-checked edit-done btn btn-block btn-info"><i class="fa fa-check-square-o" aria-hidden="true"></i>Mark as "done"</button>
 </li>
                            
 <input name="selected-products" class="selected-products" type="text">
<table class="productdetails-table table table-bordered table-hover " style="cursor:pointer">
<tbody>
<tr>
   <th>Check</th>
   <th>Status</th>
</tr>

<tr class="productdetails" data-product_id="93"><td><input class="check-parent" value="93" type="checkbox"></td><td class="status_result detail"  ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>
<tr class="productdetails" data-product_id="92" data-table="productdetails"><td class="check close_sidebar"><input value="92"  type="checkbox"></td><td class="status_result" ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>