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私が正しく理解していれば、選択に基づいてを表示/非表示にしようとしています。私がこれがあなたが望むものではない場合、私に言います。

デモ

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 に答える