Question

javascript代码

/*-- MASONRY FILTER --*/
$('.item-filter').on('click', 'a', function(e) {
    e.preventDefault();
    var selector = $(this).data('filter');

    $(".item-filter a").removeClass("active");
    $(this).addClass("active");

    $(".item").fadeTo("slow", 0.33);
     $(selector).fadeTo("slow", 1);
});
/*-- MASONRY FILTER END --*/

我的style.css

.item-filter{
padding                 : 30px 0;
}
.item-filter ul li a{
height                  : 34px;
line-height             : 34px;
color                   : #FFF;
padding                 : 0 20px;
margin                  : 0 15px;
border                  : 1px solid transparent;
-webkit-border-radius   : 17px;
-moz-border-radius      : 17px;
border-radius           : 17px;
-ms-filter              : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter                  : alpha(opacity=50);
-moz-opacity            : 0.5;
-khtml-opacity          : 0.5;
opacity                 : 0.5;

}

当我选择要过滤的类别时，我需要更改什么...隐藏其他项目显示刚刚选择的类别将其置于页面顶部？我必须在我的网站上有很多项目，这就是我已经尝试更改过滤器的原因..

Answer 1

根据评论更新了答案：

$('.item-filter').on('click', 'a', function(e) {
    e.preventDefault();
    var selector = $(this).data('filter');

    $(".item-filter a").removeClass("active");
    $(this).addClass("active");

    $('.masonry-item').show().addClass("item masonry-brick"); //show all tiles (used to reset the tiles when the filter changes)
    $('.masonry-item').not(selector).hide().removeClass("item masonry-brick"); // hides all 'unwanted' items, and removes relevant classes in preparation for next step
    $('.masonry-list').masonry(); // refreshes the Masonry tiles
});

请告诉我这是否适合您。

Javascript过滤器类别隐藏其他人将选定的类别放在最上面

1 个答案: