Question

我花了很多时间试图让它发挥作用并没有运气。

我按照这里的文档： http://isotope.metafizzy.co/filtering.html

所以基本上我想要做的就是显示任何具有类'box'的东西并隐藏其他所有东西。我将这行代码添加到JS：

$('.items').isotope({
    itemSelector: '.box',
    filter: '.box' 
});

我已尝试过其他JS代码行，包括以下代码：

$container.isotope({
    filter: '.box'
});

它们似乎都不起作用。

这是我的（部分）HTML：

<div class="metro-layout vertical">
    <div class="header">
        <h1>My Street Life</h1>
        <div class="controls">
            <span class="down" title="Scroll down"></span>
            <span class="up" title="Scroll up"></span>
            <span class="next" title="Scroll left"></span>
            <span class="prev" title="Scroll right"></span>
            <span class="toggle-view" title="Toggle layout"></span>
        </div>
    </div>
    <div class="content clearfix">
        <div class="items">
            <a class="temp" href="#" style="background: #E67E22;">
                <span>Music</span>
                <img height="150px" width="150px" class="icon" src="images/my-music.png" alt="" />
            </a>
            <a class="box" href="#" style="background: #1ABC9C;">
                <span>TV &amp; Movies</span>
                <img height="150px" width="150px" class="icon" src="images/my-movies.png" alt="" />
            </a>

这是我的（部分）JS：

$(function() {

// get elements to increase speed
$layout = $('.metro-layout');
$container = $('.metro-layout .content');
$('.items').isotope({
    itemSelector: '.box',
    filter: '.box' 
});


// this method should be called when you want to switch the layout style - horizontal or vertical
function changeLayoutMode(isHorizontal) {
    $('.items',$layout).removeAttr('style'); // clean style
    if ( isHorizontal ) {
        $('.items',$layout).css({
            width: $('.items',$layout).outerWidth() // make sure we get the whole width of the items container
        }).isotope({
            itemSelector : '.box',
            layoutMode: 'masonryHorizontal',
            animationEngine : 'css'
        });
    } else {
        $('.items',$layout).css({ width: 'auto' }).isotope({
            itemSelector : '.box',
            layoutMode: 'masonry',
            animationEngine : 'css'
        });
    }
}
changeLayoutMode($layout.hasClass('horizontal')); // init initial state based on the class in the markup

我认为你不需要完整的代码，但如果你觉得你这样做，请告诉我。

此外，如果您需要我的更多信息或我的问题不明确，请告诉我。有了这个说，有人可以帮助我解决这个问题吗？

这是JSFiddle的链接：http://jsfiddle.net/mikev10/r229k3j0/2/通知最右边的'音乐'框仍然存在，即使它有一个'temp'类

Answer 1

它不是过滤的原因是因为同位素只过滤它所控制的物品。 itemSelector为.box，filter为.box。它不会删除.temp项，因为它没有加载到同位素中。以下是一个工作示例。

http://jsfiddle.net/r229k3j0/6/

您会注意到itemSelector现在是.item，我将该类添加到.items内的所有元素中。看起来像你想要的那样。

同位素过滤器不显示/隐藏特定类

1 个答案: