0

私のサイトには、デフォルトですべての要素が表示されています。

Isotope には組み込みメソッド 'filter' があります。つまり、これだけを表示します。

画面上のボタンのクリックに基づいて要素を非表示/表示する関数を作成したいと思います-つまり、これのみを非表示(および他のものを表示)/これを再表示(および他のものを表示)。

これが私がコード的にやっていることです。

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 に答える