如何根据每个数组值更改多个元素？

Question

当我选中我的复选框然后单击“标记为已完成”按钮时，status_result将更改为 @JsonTypeInfo(use = JsonTypeInfo.Id.NAME, include =JsonTypeInfo.As.WRAPPER_OBJECT, visible=true) @JsonSubTypes({ @JsonSubTypes.Type(name = "ContactUserJ", value = ContactUser.class), @JsonSubTypes.Type(name = "CompanyNameJ" , value = String.class) }) 。它适用于我为每一个单独做的事情。但是，如果我检查所有。然后只有一个status_result正在改变：

done

$('.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>');    
        });
  });

Answer 1

问题是由逗号后添加的额外空格引起的。如果您将$(".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>'); }); });，那么它就可以正常工作。

＆＃13;

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我觉得您可能不熟悉浏览器中内置的JavaScript调试器。如果你学习如何使用调试器，你可以在几秒钟内找到这样的问题，而不是被困在堆栈溢出上。

你现在可以开始了。以下是在战略位置添加debugger;声明的代码段副本。

在浏览器中打开开发人员工具，然后运行代码段。选中两个复选框，然后单击按钮。它将在debugger;语句中停止。在Chrome中，您应该看到如下面板：

现在仔细查看Local下的内容，您会看到array中的值。它可能会向您跳出"93"看起来正确，但" 92"前面有空格。

这是更新后的代码段;尝试一下，看看你能发现什么，然后在下次遇到这样的谜团时使用调试器。

＆＃13;

＆＃13;

$('.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>');    
        });
  });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;