如何使用jQuery按列B过滤列A.

时间：2013-01-02 21:47:37

标签： jquery jquery-selectors show-hide

我正在使用show / hide来根据类属性显示项目组。如何进一步过滤这些项目组，以便通过单击B列中的第二个结果集是第一个结果集的子集。基于我的阅读，我认为过滤器或兄弟可能会持有钥匙，但到目前为止我的实验都失败了。

这里我将更新所需功能的更多解释： 单击第一个列表中的项目以显示该列表的子集。 单击第二个列表中的项以优化上一个子集。 例如，在第1列中，单击红色以仅查看红色项目。 然后在第2列中，单击“大”以仅查看大的红色项目。在第2列中，单击“小”以仅查看小红色项目。应该可以这样过滤，直到回到第一列，这将显示该列表的新子集。

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>

2 个答案:

答案 0 :(得分：1)

此fiddle将起作用 

$('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的编辑：

此fiddle可以使用。

$(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个额外的过滤器。

答案 1 :(得分：1)

http://jsfiddle.net/vaX5V/

我已将A列设置为第一个过滤器，然后是B列。因此，如果单击A然后选择B，则会得到一个过滤器，然后是该子集上的另一个过滤器。

JAVASCRIPT 

$(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变量来查找第二组（B列），然后隐藏第二组中显示 NOT 的任何内容。

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>
相关问题
最新问题