0

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

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

我已经确定我必须使用 jQuery .detach() 和 .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');
    });  
});

任何帮助将不胜感激。非常感谢。

4

1 回答 1

1

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

演示

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

    }
});
于 2012-05-10T21:12:49.170 回答