Question

我可能遗漏了一些非常简单的事情，但情况如下：

我有一行复选框和一个列表项网格。我希望复选框根据检查的内容切换列表项的可见性（仅标准过滤）。

我已经确定我必须使用jQuery .detach（）＆amp; .appendTo（）函数，因为这会在列表项消失/重新出现时保持我的所有：nth-child属性。

这是我的HTML：

<div id="filter">
  <input type="checkbox" id="print" rel="print">Print</label>
  <input type="checkbox" id="web" rel="web">Web</label>
  <input type="checkbox" id="identity" rel="identity">Identity</label>
</div>

然后我在课程领域有很多带有各种标签名称的LI -

<ul>
  <li class="print">
    // stuff
  </li>
  .
  .
  .
</ul>

现在我的jQuery（这是第一次点击过滤器复选框，但之后它没有做任何事情......）

$('#filter').delegate('input:checkbox', 'change', function() {  
   var $lis = $('#grid-wrap > li').detach();        

   //For each one checked
   $('input:checked').each(function() {
     $lis.filter('.' + $(this).attr('rel')).appendTo('#grid-wrap');
    });  
});

任何帮助都会受到超级赞赏。非常感谢你。

Answer 1

如果我理解正确，那么您将尝试根据选择显示/隐藏li。如果我不是你想要的话，让我知道，

DEMO

var $lis;

$('#filter').delegate('input:checkbox', 'change', function() {

    if (!$lis) $lis = $('#grid-wrap > li').detach();
    $('#grid-wrap').empty();

    if ($('input:checked').length == 0) {
        $lis.appendTo('#grid-wrap');
        $lis = null;
    } else {
        $('input:checkbox').each(function(i, chk) {
            if (chk.checked) {
                $lis.filter('.' + $(chk).attr('rel')).appendTo('#grid-wrap');
            }
        });

    }
});

使用.detach（）+ .appendTo（）进行jQuery Checkbox过滤

1 个答案: