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>

1 Answer
1

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.