0

画像をフィルタリングする必要があるため、JQuery の Isotope プラグインのフィルタリング機能を模倣しようとしていますが、実際に Isotope を使用すると、ページ上のいくつかのパララックス スクロール要素に問題が発生します。

データ属性を持たない画像を切り替えるために、この短い JQuery スニペットを作成data-filterしました。一致しないアイテムが削除されると、プラグインがアイテムを並べ替えないという事実を除けば、Packery正常に動作します。

私が抱えている問題は、別のフィルター リンクをクリックするとフィルターをリセットする必要があることです。別のフィルターをクリックすると、最初にフィルター処理された要素が消え、フィルター処理された要素以外のすべての要素が返されます。解決策は簡単だと確信していますが、JQuery の知識が非常に限られているため、これにアプローチする方法がわかりません。

コード

$("#filters a").click(function()    {
        var type = $(this).attr('data-filter');
        $('img').not('[data-filter="'+type+'"]').toggle( 1000 );        
    });

また、1 つのリンクですべての要素を表示状態に戻す方法もありません。

4

2 に答える 2

2

その機能にトグルを使用したくないと思います。おそらく、フィルタ タイプに適合する、または適合しないさまざまなものに対して、特に非表示と表示を使用できます。このような：

$("#filters a").click(function()    {
    var type = $(this).attr('data-filter'),
        $img = $( 'img' );

    $img.filter( '[data-filter="'+type+'"]' ).show( 1000 );
    $img.not( '[data-filter="'+type+'"]' ).hide( 1000 );
});

次に、すべてのフィルターをリセットするには、別のイベントまたはイベントの条件を使用し、次のようにしてすべての画像を表示します。

$img.show( 1000 );
于 2013-12-31T16:31:29.800 に答える
1

jQuery -.toggle()によると、すべての要素を表示できますtoggle(true) 

$("#filters a").click(function() {
        var type = $(this).attr('data-filter');
        $('img').toggle(true).not('[data-filter="'+type+'"]').toggle( 1000 );        
});

JSFiddle

于 2013-12-31T16:13:22.973 に答える