Question

我尝试创建一个搜索过滤器，显示用户在div中检查过的值列表。我想通过克隆复选框的标签来做到这一点。

因此，当用户单击其中一个字段集中的复选框时，它应该克隆并将其标签附加到＆＃34;列表＆＃34;下面的div。这是我的HTML：

<div class="filters">
<h2>Narrow by:</h2>
<fieldset>
<legend>Product</legend>
<p>
  <label for="one">Filter 1 Label</label>
  <input type="checkbox" id="one">
</p>
<p>
  <label for="two">Filter 2 Label</label>
  <input type="checkbox" id="two">
</p>
<p>
  <label for="three">Filter 3 Label</label>
  <input type="checkbox" id="three">
</p>
</fieldset>
<div class="list"> </div>
<fieldset>
<legend>Product Version</legend>
<p>
  <label for="four">Filter 4 Label</label>
  <input type="checkbox" id="four">
</p>
<p>
  <label for="five">Filter 5 Label</label>
  <input type="checkbox" id="five">
</p>
<p>
  <label for="six">Filter 6 Label</label>
  <input type="checkbox" id="six">
</p>
</fieldset>
<div class="list"> </div>
</div>

这是我的js：

$(document).on('click', 'fieldset input:checkbox',function(){ 
if($(this).is(':checked'))
{           
    $(this).closest('label').clone().appendTo( $(this).closest('.list'));
}
});

但它没有用。这是一个小提琴：

https://jsfiddle.net/tactics/0fLnvyep/

感谢任何帮助。

Answer 1

标签是兄弟姐妹。最近看父母。并且'list'不是父母。

//don't bind on document with delegates if you can avoid to
$('.filters').on('click', 'fieldset input:checkbox',function(){
    var $checkbox = $(this);

    if ($checkbox.is(':checked')) {
        $checkbox.parent().find('label').clone().appendTo($('.list'));
    }
});

在包含jquery之后，这适用于你的小提琴，但附加到所有列表元素。您可以执行$ checkbox.closest（'fieldset'）。next（）而不是$（'。list'），但您应该考虑更改标记，这样您就不必依赖next（）。任何基于职位的逻辑本质上都是脆弱的。

克隆选中复选框标签并使用jquery追加到最近的div

1 个答案: