obiboke
obiboke

Reputation: 73

How to connect two filters in jquery content? Filter 1 and filter 2 connect result

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>

Upvotes: 0

Views: 166

Answers (1)

Taplar
Taplar

Reputation: 24965

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>

Upvotes: 1

Related Questions