如何使用jQuery按B列过滤A列答案

【问题标题】：How to filter column A by column B using jQuery如何使用jQuery按B列过滤A列
【发布时间】：2012-12-17 06:32:09
【问题描述】：

我正在使用显示/隐藏来显示基于它们的类属性的项目组。如何进一步过滤这些项目组，以便在 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>

【问题讨论】：

标签： jquery jquery-selectors show-hide

【解决方案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额外的过滤器。

【讨论】：

编辑对 B 列中的点击非常有效，但 A 列似乎没有重置。我喜欢添加额外过滤器的能力——优雅！
在任何时候您都可以应用两个过滤器。在使用 A 列和 B 列过滤后单击 A 列会将 A 过滤器重置为新单击的过滤器，同时保持应用 B 过滤器。
谢谢@Kyle - 这是解决问题的好方法。也许我可以更进一步，以便单击 A 列进行完全重置。

【解决方案2】：

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>

【讨论】：

谢谢。我正在试验它。它似乎并没有让我点击回到 A 列...
如果您单击 A 列，它应该重置选择过程，然后您可以再次选择 B 列。