0

同位体フィルター メニューに問題があります。タイムスタンプに基づいて情報をロードし、フィルタリングできるようにする必要があります。残念ながら、私の sortBy スクリプトに関する何かがフィルター スクリプトと競合しています。

問題のjsは次のとおりです。

並べ替えコード:

$('.showcase').isotope({
    itemSelector: '.item',
    getSortData: {
        date: function ($elem) {
            return $elem.attr('data-timestamp');
        }
    },
    sortBy: 'date',
    sortAscending: true,
    masonry: {
        columnWidth: 1
    }
});

フィルタ メニュー コード:

// filter container
var $container = $('.showcase');
$container.isotope({
    itemSelector: '.thumb'
});
var $optionSets = $('.filter'),
    $optionLinks = $optionSets.find('a');
$optionLinks.click(function () {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
        return false;
    }
    var $optionSet = $this.parents('.dropdown');
    $optionSet.find('.selected').removeClass('selected');
    $this.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;
});

これが機能するjsfiddleです：http://jsfiddle.net/3ngjL/2/

これら 2 つのコード ブロックは別々に機能しますが、一緒には機能しません。誰かが洞察を提供できるなら、私はそれを感謝します。

4

1 に答える 1

0

私はそれを考え出した...

コードの「sortBy」チャンクで、同位体のコンテナーを宣言しました。

$('.showcase').isotope({

次に、フィルター コードで再度名前を付けます。

var $container = $('.showcase');
    $container.isotope({
});

私はこれを行うことでそれを修正しました：

var $container = $('.showcase');
  $container.isotope({
    itemSelector : '.thumb',
    getSortData : {
      date : function ( $elem ) {
        return $elem.attr('data-timestamp');
      }
    },
    sortBy : 'date',
    sortAscending : true
  });

作業コードの更新されたフィドルは次のとおりです: http://jsfiddle.net/3ngjL/3/

于 2013-08-15T16:20:43.037 に答える