0

我的网站默认显示所有元素。

同位素具有内置方法“过滤器” - 即仅显示此方法。

我想创建一个功能，基于单击屏幕上的按钮来隐藏/显示元素 - 即仅隐藏此（并显示其他）/取消隐藏此（并显示其他）。

这就是我正在做的代码方面的事情。

var music = $('#music').isotope();

$('nav button').on('click', function () {

    music.isotope({

        filter: "div." + $(this).attr("class")
    });
4

1 回答 1

0

通过过滤，过滤器参数必须匹配 HTML 标记中的项目，否则过滤器不会返回任何内容。

小提琴演示：http: //jsfiddle.net/XWVhc/1/

我只能提供一个替代示例，因为您没有提供任何 html 标记以便我们可以调试您当前的代码，但是，我将解释它是如何工作的。

过滤器的 HTML：

这里我们有一些简单的按钮，它们将使用data-filter附加到每个按钮的属性来过滤我们的项目。

<div id="filter-buttons-holder">
    <div class="filter-button" data-filter=".dog">DOG</div>
    <div class="filter-button" data-filter=".cat">CAT</div>
    <div class="filter-button" data-filter=".foo">FOO</div>
    <div class="filter-button" data-filter=".bar">BAR</div>
    <div class="filter-button selected" data-filter=".dog, .foo, .cat, .bar">SHOW ALL</div>
</div>

同位素项目的 HTML：

这是我们同位素项目的标记，请注意，每个项目都有一个类别，isotope-item也有一个类别，它属于什么“类别”，您可以添加多个类别，它仍然会按预期过滤。

<div id="module-columns-holder" class="isotope"> 
    <a href="/" class="dog isotope-item"> 
        <div><h1>DOG</h1></div> 
    </a>  
        <a href="/" class="cat foo isotope-item"> 
        <div><h1>CAT</h1></div> 
    </a>  
    <a href="/" class="dog isotope-item"> 
        <div><h1>DOG</h1></div> 
    </a>  
    <a href="/" class="foo isotope-item"> 
        <div><h1>FOO</h1></div> 
    </a>  
    <a href="/" class="bar isotope-item"> 
        <div><h1>BAR</h1></div> 
    </a>  
</div>

JAVASCRIPT 过滤

在这里，我们设置了同位素容器，注意最后一个数据属性是一个过滤器，这实际上是您所追求的，但是您可以指定最初要过滤的“类别” 。

//Setup isotope for filters
var isotopeContainer = $('#module-columns-holder');
isotopeContainer.isotope({
    itemSelector: '.isotope-item',
    layoutMode : 'fitRows',
    animationOptions : {
        queue : false,
        duration : 750,
        easing: 'linear'
    },
    filter: '.dog, .cat, .foo, .bar'
});

点击过滤器事件

您可以将过滤器附加到我们之前创建的按钮，以便您可以进行实时过滤

    $('#filter-buttons-holder .filter-button').on('click',function(){
        var filters = $(this).data('filter');
        var parent = $(this).closest('#filter-buttons-holder');
        parent.find('.selected').removeClass('selected');
        $(this).addClass('selected');
        isotopeContainer.isotope({ filter: filters });
        return false;
    });

希望这可以帮助

于 2013-09-03T00:27:17.087 回答