Create filter buttons using jQuery

Question

I want to create filter buttons for my posts this my html code

<div id='filter'>
    <button class='arts'>Arts</button>
    <button class='sport'>Sports</button>
    <button class='games'>Games</button>
</div>

<div id='posts'>
    <div class='post sport'></div>
    <div class='post arts'></div>
    <div class='post games'></div>
    <div class='post games sport'></div>
    <div class='post arts'></div>
    <div class='post sport'></div>
    <div class='post games'></div>
</div>

and i use this jquery code

$("#filter button").each(function() {
    $(this).on("click", function(){
         var filtertag = $(this).attr('class');
         $('.post').hasClass(':not(filtertag)').hide();
    });
});

but this not working with me so plz give me the right way to do that

What's this $('.post-outer') supposed to select?

j08691
– j08691

2014-08-01 20:45:18 +00:00
Commented Aug 1, 2014 at 20:45 — j08691
– j08691, Commented Aug 1, 2014 at 20:45
sorry i mean $('.post')

Mohamed Abo ElGhranek
– Mohamed Abo ElGhranek

2014-08-01 20:48:24 +00:00
Commented Aug 1, 2014 at 20:48 — Mohamed Abo ElGhranek
– Mohamed Abo ElGhranek, Commented Aug 1, 2014 at 20:48

putvande · Accepted Answer · 2014-08-01 20:54:18Z

3

You are passing in the literal string "filtertag", not the variable, so you need to do the following:

$('.post').show(); // Show all posts
$('.post:not(.' + filtertag + ')').hide(); // Hide the ones you don't want

Fiddle

edited Aug 1, 2014 at 20:54

answered Aug 1, 2014 at 20:46

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cssyphus · Accepted Answer · 2014-08-01 20:55:47Z

0

Try this code. You may need to change the jQuery selectors to work with your live site.

jsFiddle Demo

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

answered Aug 1, 2014 at 20:55

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Comments

PeterKA · Accepted Answer · 2014-08-01 21:03:29Z

0

This should do it; you do not need to use a .each loop to attach the event listeners to the buttons.

    $('.post').hide();//if you want them hidden to start with
    $("#filter button").on("click", function(){
        var filtertag = $(this).attr('class');
        $('.post').hide().filter('.' + filtertag).show();
    })
    [0].click();//if you want them filtered by first button on load

DEMO

edited Aug 1, 2014 at 21:03

answered Aug 1, 2014 at 20:57

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Create filter buttons using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related