如何使用jQuery按列B筛选列A_Jquery_Jquery Selectors_Show Hide

如何使用jQuery按列B筛选列A

jquery

如何使用jQuery按列B筛选列A,jquery,jquery-selectors,show-hide,Jquery,Jquery Selectors,Show Hide,我使用“显示/隐藏”根据项目的类属性显示项目组。如何进一步筛选这些项目组，以便在B列中单击的第二个结果集是第一个结果集的子集。根据我的阅读，我认为过滤器或兄弟姐妹可能掌握着关键，但到目前为止，我的实验失败了在这里，我将对所需的功能进行更多的解释：单击第一个列表中的项目以显示该列表的子集。单击第二个列表中的一个项目以细化上一个子集。例如，在第1列中，单击红色以仅查看红色项目。然后在第2列中，单击“大”以仅查看较大的红色项目。仍在第2列中时，单击“小”以仅查看红色的小项目。应该可以通过这种

我使用“显示/隐藏”根据项目的类属性显示项目组。如何进一步筛选这些项目组，以便在B列中单击的第二个结果集是第一个结果集的子集。根据我的阅读，我认为过滤器或兄弟姐妹可能掌握着关键，但到目前为止，我的实验失败了

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


*{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；列表样式：none；padding right:30px}
.item.small{字体大小：1em}
.item.medium{字体大小：2em}
.item.large{字体大小：3em}
.item.red{背景：red}
.item.green{背景：绿色}
.item.blue{背景：blue}
.item.orange{背景：orange}
.item.purple{背景：紫色}
问题：调整jQuery代码以使B列在A列上进行筛选？
列A
按以下方式过滤：

A
红色
绿色
大
小
B
橙色

B列
然后通过：

A
红色
绿色
大
小
B
橙色

A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C
$（文档）.ready（函数（）{
$（'li'）。单击（函数（）{
$（'.item div'）.hide（）；
$（'..+this.id）.show（'slow'）；
});
});

这将起作用

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

在这种情况下，我建议使用闭包，这样您就不需要在每次单击时重新选择

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

注意：按照编写代码的方式，您应该能够添加额外的过滤器。

我已经将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列），然后隐藏第二个集合中未显示的任何内容

HTML


问题：调整jQuery代码以使B列在A列上进行筛选？
列A
按以下方式过滤：

A
红色
绿色
大
小
B
橙色

B列
然后通过：

A
红色
绿色
大
小
B
橙色

A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
A.
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C

谢谢您的帮助。我正在用它做实验。它似乎不允许我点击返回A列…如果你点击A列，它应该重置选择过程，然后你可以再次选择B列。编辑对B列的点击效果很好，但A列似乎不会重置。我喜欢添加额外过滤器的能力——优雅！在任何时候都可以应用两个过滤器。在使用A列和B列进行筛选后单击A列将重置A筛选器为新单击的筛选器，同时保持B筛选器的应用。感谢@Kyle-这是解决问题的一个很好的方法。也许我可以更进一步，这样点击A列就可以完成重置。

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

    });
});

<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>