Question

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

Isotope具有内置方法'过滤器' - 即仅显示此。

我想创建一个功能，我可以隐藏/显示一个基于点击屏幕上按钮的元素 - 即只隐藏这个（并显示其他人）/取消隐藏（并显示其他人）。

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

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

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

    music.isotope({

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

Answer 1

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

FIDDLE DEMO： http://jsfiddle.net/XWVhc/1/

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

HTML for FILTERS：

这里有一些简单的按钮，可以使用每个按钮附加的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 for ISOTOPE项目：

这是我们的同位素项目的标记，请注意每个项目都有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 FILTERING

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

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

希望这有帮助

同位素隐藏在点击

1 个答案: