Question

我正在尝试为每个已选中的复选框生成li元素。当仅选中一个复选框时，它可以工作，但是当我选中两个复选框时，仅生成最后一个复选框及其隐藏的输入（用于填充li元素内部特定值的隐藏输入）。

这是我现在使用的代码：

%pythonpath%

欢呼

Answer 1

您要在每个循环中分配字符串，而不是附加-意味着您只会得到最后一个。

一种选择是更改...

structure = "<li class='menu-item menu-item-depth-0'>"+

致...

structure += "<li class='menu-item menu-item-depth-0'>"+

另一种选择是将字符串直接附加在每个循环上...

$(checkboxes).each(function(){
    var hidden = $(this).closest('li').find(':hidden');
    $('#menu-to-edit').append(
        "<li class='menu-item menu-item-depth-0'>"+
          "<div class='menu-item-bar'>"+
            ...
          "</div>"+
        "</li>");
});

Answer 2

我在下面做了一个简单的例子（因为您没有共享HTML，并且共享的一堆代码与问题本身无关）

基本上，您需要附加到现有的HTML。每次选中复选框时，您要执行的操作是将其替换为新的li。因此它会覆盖之前的html。

当未选中此复选框时，我也删除了相应的li。

那里可能是一个更直接的解决方案，但这是我目前想出的最好的方法：）

var chkBox = $(".checkbox")
$(chkBox).on('change', function(){

  var index = $(this).index()
  var menuItem = `<li class=${index}>${index} list item</li>`
    if ($(this).is(':checked') ) {
      $('.menu').html($('.menu').html() + menuItem)
    } else {
      $(`li.${index}`).remove()
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">

</ul>
<div>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
</div>

生成动态li元素，具体取决于选中了多少个复选框

2 个答案: