1

jQueryアイソトーププラグインを使用して、カテゴリに基づいて一連の結果をフィルタリングしています。私はそれをさらに一歩進めて、フィルタリングされた結果を同時に再ソートしようとしています（カテゴリごとに、アイテムのソート順は異なります）。

カテゴリがクリックされると、アイテムはクラスとして一致するカテゴリを持つアイテムにフィルタリングされます。以下の例では、2つのアイテムがあります。どちらも「カテゴリスピーカー」と「カテゴリサポーター」に分類されているため、フィルターナビゲーションでこれらのカテゴリのいずれかをクリックすると、両方のアイテムが表示されます。私が今やりたいのは、表示されているカテゴリに基づいて、これらのアイテムを異なる方法でソートすることです。

「スピーカー」を選択すると、「post-1」が最初に表示されます。「サポーター」を選択すると、「post-2」が最初に表示されます。並べ替えは、アイテム内の追加のクラス（sort-speakers-1、sort-speakers-2、sort-supporters-1、sort-supporters-2など）に基づいて行われます。

それが理にかなっていることを願っています！getSortDataオプションを使用してみましたが、何か問題があります。アイソトープのドキュメントは理にかなっており、個別にフィルタリングして並べ替えることができます。ただし、同時に運が悪いです。

以下の簡略化されたフィルターコード

HTML：

<!-- Grid of filterable/sortable items -->
<div id="Grid">

    <div id="post-1" class="category-supporters category-speakers item sort-speakers-1 sort-supporters-2" data-slug="lorem-ipsum-dolor">
        <div class="itemButton format-standard"></div>
        <div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
            <div class="entry-image clearfix">
                <div class="hover-content zoom">
                    <a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
                        <img src="logo.jpg" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="post-2" class="category-speakers category-supporters item sort-speakers-2 sort-supporters-1" data-slug="lorem-ipsum-dolor">
        <div class="itemButton format-standard"></div>
        <div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
            <div class="entry-image clearfix">
                <div class="hover-content zoom">
                    <a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
                        <img src="logo2.jpg" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div>        

</div>

JavaScript：

jQuery(document).ready(function(){

    $container = jQuery('#Grid');

    $container.isotope({
        itemSelector : '.item',
        transformsEnabled: false,
        masonry: {
            columnWidth: 160
        }
    });

   $optionLinks.click(function(){
        var $this = jQuery(this);

        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');        
        $this.parent().parent().prev('a').addClass('selected');

        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');

        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
            // changes in layout modes need extra logic
            changeLayoutMode( $this, options )
        } else {
            // otherwise, apply new options
            $container.isotope( options );
        }
        return false;
    });    

});

毎回リゾートするようにJavaScriptを変更する方法について何か提案はありますか？

4

1 に答える 1

3

同位体のドキュメントは理にかなっており、個別にフィルタリングして並べ替えることができます。ただし、同時に運はありません。

私は現在、アイソトープを使ったプロジェクトにも取り組んでいます。一度に並べ替えとフィルタリングに問題はありません。

並べ替えの値をデータ属性に入れることをお勧めします。

<div data-sort-speaker="1">

これにより、値の取得が簡単になります（ただし、それは私だけです）。それで：

$.container.isotope({ 
    // all your other initialization options here.
    getSortData: { 
        speakers: function ($elem) {
            return $elem.data('sort-speaker'); // will return 1 in this example.
        } 
    } 
});

// On button click:
$.container.isotope({filter: '.category-speakers', sortBy: 'speakers'});

毎回リゾートするようにJSを変更する方法について何か提案はありますか？

電話してみてください

 $.container.isotope('reLayout');

毎回。ただし、フィルターまたは並べ替えオプションを毎回変更する場合は、これは必要ありません。

于 2013-02-03T17:43:32.843 に答える