0

クラス属性に基づいてアイテムのグループを表示するために、表示/非表示を使用しています。これらのアイテムのグループをさらにフィルタリングして、列 B をクリックした後の 2 番目の結果セットが最初の結果セットのサブセットになるようにするにはどうすればよいでしょうか。私の読書に基づいて、フィルターまたは兄弟が鍵を握っている可能性があると考えていますが、これまでのところ私の実験は失敗しています.

ここで、目的の機能についてもう少し説明を加えて更新します。最初のリストの項目をクリックして、そのリストのサブセットを表示します。2 番目のリストの項目をクリックして、前のサブセットを絞り込みます。たとえば、列 1 で赤をクリックすると、赤い項目のみが表示されます。次に、列 2 で、大きな赤い項目のみを表示するには、大きな項目をクリックします。まだ列 2 にいる間に、小さな赤い項目のみを表示するには、小さいをクリックします。そのリストの新しいサブセットを表示する列 1 に戻るまで、この方法でフィルター処理できるはずです。

http://jsfiddle.net/TorontoDave/Ph98L/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <style>
        * {font-family:arial}
        .item div {height:50px; width:50px; color:white; font-weight:bold; float:left; margin:1px; text-align:center}
        .nav {float:left}
         li {float:left; list-style:none; padding-right:30px}
        .item .small {font-size:1em}
        .item .medium {font-size:2em}
        .item .large {font-size:3em}
        .item .red {background:red}
        .item .green {background:green}
        .item .blue {background:blue}
        .item .orange {background:orange}
        .item .purple {background:purple}
    </style>

    <script src="../js/jquery-1.5.2.min.js"></script>

    </head>

    <body>
    <h1>Problem: adjust my jQuery code to get column B to filter on column A?</h1>
    <div class="nav">
    <p>Column A<br>Filter by:</p>
    <ul>
    <li id="A">A</li>
    <li id="red">red</li>
    <li id="green">green</li>
    <li id="large">large</li>
    <li id="small">small</li>
    <li id="B">B</li>
    <li id="orange">orange</li>
    </ul>
    </div>

    <div class="nav">
    <p>Column B<br>Then by:</p>
    <ul>
    <li id="A">A</li>
    <li id="red">red</li>
    <li id="green">green</li>
    <li id="large">large</li>
    <li id="small">small</li>
    <li id="B">B</li>
    <li id="orange">orange</li>
    </ul>
    </div>

    <div class="item">
    <div class="small red A">A</div>
    <div class="small green A">A</div>
    <div class="small orange A">A</div>
    <div class="small purple A">A</div>
    <div class="small blue A">A</div>
    <div class="medium red A">A</div>
    <div class="medium green A">A</div>
    <div class="medium orange A">A</div>
    <div class="medium purple A">A</div>
    <div class="medium blue A">A</div>
    <div class="large red A">A</div>
    <div class="large green A">A</div>
    <div class="large orange A">A</div>
    <div class="large purple A">A</div>
    <div class="large blue A">A</div>
    <div class="small red B">B</div>
    <div class="small green B">B</div>
    <div class="small orange B">B</div>
    <div class="small purple B">B</div>
    <div class="small blue B">B</div>
    <div class="medium red B">B</div>
    <div class="medium green B">B</div>
    <div class="medium orange B">B</div>
    <div class="medium purple B">B</div>
    <div class="medium blue B">B</div>
    <div class="large red B">B</div>
    <div class="large green B">B</div>
    <div class="large orange B">B</div>
    <div class="large purple B">B</div>
    <div class="large blue B">B</div>
    <div class="small red C">C</div>
    <div class="small green C">C</div>
    <div class="small orange C">C</div>
    <div class="small purple C">C</div>
    <div class="small blue C">C</div>
    <div class="medium red C">C</div>
    <div class="medium green C">C</div>
    <div class="medium orange C">C</div>
    <div class="medium purple C">C</div>
    <div class="medium blue C">C</div>
    <div class="large red C">C</div>
    <div class="large green C">C</div>
    <div class="large orange C">C</div>
    <div class="large purple C">C</div>
    <div class="large blue C">C</div>
    </div><!-- //end items -->  


        <script><!-- to show and hide overlays -->
        $(document).ready(function(){
            $('li').click(function(){
                $('.item div').hide();
                $('.'+this.id).show('slow');
            });
        });
    </script>


    </body>
    </html>
4

2 に答える 2

1

このフィドルは機能します

$('li').click(function() {
  var divs = $('item div:visible').add('.' + this.id + ':visible');
  $('.item div').hide();
  divs.show('slow');
});

このfiddleでクロージャーを使用することをお勧めします。そのため、divクリックするたびに を再選択する必要はありません。それらが動的でない限り。

$(document).ready(function() {
  var squares = $('.item div');
  $('li').click(function() {
    var divs = $(':visible', squares).add('.' + this.id + ':visible');
    squares.hide();
    divs.show('slow');
  });
});​

OPの編集によると：

このフィドルは機能します。

$(document).ready(function() {
  var squares = $('.item div');
  var filters = $('.nav').data('filter', null);
  $('li').click(function(){
    $(this).closest('.nav').data('filter', '.' + this.id);
    var f = filters.map(function(){ return $(this).data('filter'); }).toArray();
    squares.hide().filter(f.join('')).show('slow');
  });
});​

注:nコードが記述されている方法では、追加のフィルターを追加できるはずです。

于 2013-01-02T22:04:27.420 に答える
1

http://jsfiddle.net/vaX5V/

列 A を最初のフィルターとし、その後に列 B を設定しました。したがって、A の次に B をクリックすると、フィルターが取得され、そのサブセットで別のフィルターが取得されます。

ジャバスクリプト

$(document).ready(function() {
    $('li').click(function(e) {
        console.log($(e.target).parents('div').attr('id'));
        if($(e.target).parents('div').attr('id') == 'filter1'){
            $('.item div').hide();
            $('.' + this.id).show('slow');
        }else if($(e.target).parents('div').attr('id') == 'filter2'){
            console.log('.item div.' + this.id);
            var keepShown = $('.item div.' + this.id);
            $('.item div').not(keepShown).hide('slow');    
        }

    });
});

keepShown変数を使用して 2 番目のセット (列 B) を見つけ、2 番目のセットに表示されていないものを非表示にしました。

HTML

<body>
<h1>Problem: adjust my jQuery code to get column B to filter on column A?</h1>
<div class="nav" id="filter1">
<p>Column A<br>Filter by:</p>
<ul>
    <li id="A">A</li>
    <li id="red">red</li>
    <li id="green">green</li>
    <li id="large">large</li>
    <li id="small">small</li>
    <li id="B">B</li>
    <li id="orange">orange</li>
</ul>
</div>

<div class="nav" id="filter2">
<p>Column B<br>Then by:</p>
<ul>
    <li id="A">A</li>
    <li id="red">red</li>
    <li id="green">green</li>
    <li id="large">large</li>
    <li id="small">small</li>
    <li id="B">B</li>
    <li id="orange">orange</li>
</ul>
</div>

<div class="item">
    <div class="small red A">A</div>
    <div class="small green A">A</div>
    <div class="small orange A">A</div>
    <div class="small purple A">A</div>
    <div class="small blue A">A</div>
    <div class="medium red A">A</div>
    <div class="medium green A">A</div>
    <div class="medium orange A">A</div>
    <div class="medium purple A">A</div>
    <div class="medium blue A">A</div>
    <div class="large red A">A</div>
    <div class="large green A">A</div>
    <div class="large orange A">A</div>
    <div class="large purple A">A</div>
    <div class="large blue A">A</div>
    <div class="small red B">B</div>
    <div class="small green B">B</div>
    <div class="small orange B">B</div>
    <div class="small purple B">B</div>
    <div class="small blue B">B</div>
    <div class="medium red B">B</div>
    <div class="medium green B">B</div>
    <div class="medium orange B">B</div>
    <div class="medium purple B">B</div>
    <div class="medium blue B">B</div>
    <div class="large red B">B</div>
    <div class="large green B">B</div>
    <div class="large orange B">B</div>
    <div class="large purple B">B</div>
    <div class="large blue B">B</div>
    <div class="small red C">C</div>
    <div class="small green C">C</div>
    <div class="small orange C">C</div>
    <div class="small purple C">C</div>
    <div class="small blue C">C</div>
    <div class="medium red C">C</div>
    <div class="medium green C">C</div>
    <div class="medium orange C">C</div>
    <div class="medium purple C">C</div>
    <div class="medium blue C">C</div>
    <div class="large red C">C</div>
    <div class="large green C">C</div>
    <div class="large orange C">C</div>
    <div class="large purple C">C</div>
    <div class="large blue C">C</div>
</div><!-- //end items -->    

</body>
于 2013-01-02T22:19:10.427 に答える