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

Question

当我选中复选框，然后单击“标记为完成”按钮时，status_result 将更改为“完成”。当我为每一个单曲做这件事时它就起作用了。但如果我检查全部就不会了。那么只有一个 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>