如何在jQuery内容中连接两个过滤器?过滤器1和2的连接结果 [英] How to connect two filters in jquery content? Filter 1 and filter 2 connect result

问题描述

我是jquery的新手.我在jquery中创建了过滤器，我想将它们连接在一起以显示仅单击的内容.我该怎么做?对不起，我的英语不好.我尝试了多个小时，然后才开始构建它:

I'm newbie in jquery. I created filters in jquery and i want to connect them together to show content only clicked. How i can do that? Sorry for my bad english. I try many hours and I've building this:

$("button").click(function() {
    var show = $(this).attr('class');
    $('.post').each(function(){
        $(this).show();
        var test = $(this).attr('class');
        if (test.indexOf(show) < 0) $(this).hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>FIRST</h2>
<div id='filter'>
    <button class='all'>All</button>
    <button class='1'>One</button>
    <button class='2'>Two</button>
</div>
<h2>TWO</h2>
<div id='filter'>
    <button class='all'>All</button>
    <button class='aa'>Washington</button>
    <button class='bb'>Philadelphia</button>
</div>

<br>
<div id='posts'>
    <div class='all post 1 aa'>One Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
    <div class='all post 2 bb'>Two Philadelphia</div>
    <div class='all post 2 aa'>Two Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
    <div class='all post 2 aa'>Two Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
</div>

推荐答案

有关每个步骤在做什么的详细信息，请参见逻辑中的注释.

See the comments in the logic for the details on what each step is doing.

$("button").click(function() {
  //remove the selected class from the previously selected button
  $(this).closest('.filter').find('button.selected').removeClass('selected');
  //put the class on the button you clicked
  $(this).addClass('selected');
  
  //get the data-filter off of the selected buttons and join them into a selector
  var filter = '.'+ $('button.selected').map(function(){
    return $(this).data('filter');
  }).get().join('.');
  
  //hide all the posts, and then show those that match
  $('.post').hide().filter(filter).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>FIRST</h2>
<!-- we use a class because an id cannot be repeated
     and we want to select both our filters later -->
<div class='filter'>
    <!-- data fields let us separate the classes from the data that
         is used for the filter -->
    <button data-filter='all'>All</button>
    <button data-filter='1'>One</button>
    <button data-filter='2'>Two</button>
</div>
<h2>TWO</h2>
<div class='filter'>
    <button data-filter='all'>All</button>
    <button data-filter='aa'>Washington</button>
    <button data-filter='bb'>Philadelphia</button>
</div>

<br>
<div id='posts'>
    <div class='all post 1 aa'>One Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
    <div class='all post 2 bb'>Two Philadelphia</div>
    <div class='all post 2 aa'>Two Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
    <div class='all post 2 aa'>Two Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
</div>

这篇关于如何在jQuery内容中连接两个过滤器?过滤器1和2的连接结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！