Question

我想为我的帖子创建过滤器按钮，这是我的html代码

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

我使用这个jquery代码

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

但这不适合我，所以请给我正确的方法

Answer 1

您传入的是文字字符串“filtertag”，而不是变量，因此您需要执行以下操作：

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

Fiddle

Answer 2

试试这段代码。您可能需要更改jQuery选择器以使用您的实时站点。

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

Answer 3

应该这样做;您不需要使用.each循环将事件侦听器附加到按钮。

    $('.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

使用jQuery创建过滤器按钮

3 个答案: