0

そのため、 http://isotope.metafizzy.coを使用して、サイト上のさまざまなアイテムを除外しています。メニューは「ビルドアップ」タイプである必要があります。1 つのカテゴリがクリックされると、それらのカテゴリがフィルタリングされ、次のカテゴリがクリックされると、新しくクリックされたカテゴリがカテゴリの既存のフィルタに追加されます。もう一度クリックすると、そのカテゴリがフィルターから削除されます。

より具体的には、 #filter と data-filter=".category-name" を使用した href があります。各リンクの data-filter 値の末尾に「、.another-category」を追加する関数が必要ですname="filters" (または、より簡単な場合は代わりにクラスを使用できます)

<ul>
 <li><a href="#filter" onclick="addFilter('.kitchens');" name="filters" data-filter=".kitchens">Kitchens</a></li>
 <li><a href="#filter" onclick="addFilter('.bathrooms');" name="filters" data-filter=".bathrooms">Bathrooms</a></li>
 <li><a href="#filter" onclick="addFilter('.living-rooms');" name="filters" data-filter=".living-rooms">Living Rooms</a></li>
 <li><a href="#filter" onclick="addFilter('.bedrooms');" name="filters" data-filter=".bedrooms">Bedrooms</a></li>
</ul>

この関数が間違っていて機能しないことはわかっていますが、疑似コードにすぎません

    function addFilter(filter) {
        names = document.getElementsByName("filters");
        for (var name in names) {
            name.data-filter = "existing filter, " + filter; // this should be appended to all data-filters
        }
    }

したがって、基本的にリンクがクリックされると、そのカテゴリのみ (キッチンとしましょう) のみにフィルタリングされますが、残りのデータ フィルタ (.bedrooms、.kitchens) にもカテゴリが追加されます。

javascript、jquery、または私が気付いていない可能性のあるその他のものが機能する可能性があります。アイソトープのドキュメントには、アイテムの複数のグループをフィルター処理するオプションがありますが、個々のアイテムの組み合わせをフィルター処理する必要があります。組み合わせフィルターをグループではなくアイテムに変更することは可能でしょうか?

4

2 に答える 2

0

jQuery にタグを付けたので、これは簡単ですが、JS を使用していることしかわかりません。とにかく、ここに1つの方法といくつかの追加情報があります。

jsFiddle {レプリケーションあり}

jsFiddle {なし}

脚本

$('li a[name="filters"]').on("click", function(e) {
    e.preventDefault();
    $(this).data("filter", $(this).data("filter") + ".another-category");
    /*  and if i wanted to do it without replicating already existing info:
    var f = $(this).data("filter");
    if (f.indexOf(".another-category") == -1) f += ".another-category";
    $(this).data("filter", f); */
});

HTML

<ul>
    <li><a href="#filter" name="filters" data-filter=".kitchens">Kitchens</a></li>
    <li><a href="#filter" name="filters" data-filter=".bathrooms">Bathrooms</a></li>
    <li><a href="#filter" name="filters" data-filter=".living-rooms">Living Rooms</a></li>
    <li><a href="#filter" name="filters" data-filter=".bedrooms">Bedrooms</a></li>
</ul>

エクストラNFO

于 2012-12-12T15:53:52.527 に答える
0

この投稿に掲載されている次の記事を参照してください。それはあなたを正しい方向に導くはずです。

http://www.queness.com/post/7050/8-jquery-methods-you-need-to-know

スタックオーバーフローの質問

jQuery - HTML 5 データ属性を DOM に追加する方法

于 2012-12-12T15:44:38.043 に答える