0

jQuery Masonry プラグインを使用して複数のフィルターを機能させることができました。唯一の問題は、1 つのフィルターを使用すると、リロードするまで別のフィルターを使用できないことです (私はまだこれに慣れていません)。これが私のコードです：

jQuery('#menu1').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

jQuery('#menu2').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

私の 2 つのフィルターがあります。私のサーバーにアップロードしたテンプレートを以下に
示します。指定されたように masonry プラグインをリロードしますが、[フィルター 2] をクリックするとすべてのコンテンツが非表示になるだけです。 ..リロードするまで。
両方のフィルターを同時に機能させる方法はありますか?

4

2 に答える 2

0

はい、私は同位体プラグインをさらに下に使用する予定ですが、少し時間に追われているので、このフィルターを機能させて、残りのコードの変更を節約しようとしています. 石積みを再トリガーする方法はありますか？クラスを「.hidden」から「.pics」に戻しても機能していないようです。何か提案をいただければ幸いです。

jQuery('#menu1').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

jQuery('#menu2').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

どちらも私のフィルターは単独で機能していますが、一方を他方の後に使用すると、すべての「.pics」コンテンツが非表示になるだけで、まったく理解できないようです。

于 2012-10-23T22:45:36.673 に答える
0

Masonry の再トリガーを何らかの方法で実装する必要があります。しかし、このフィルタリング方法は、フィルターを組み合わせることもできるため、非常に単純で柔軟です。

$(function() {

var $container = $('#container');

$container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: your least common divisor in pixels here
    }
});

$('#filters').on('click', 'a', function() {
    var selector = $(this).data('filter');
    $container.isotope({
        filter: selector
    });
});

});

更新:アイテム (ブログ投稿) を非表示/表示した後に再レイアウトする必要があるユーザーに関して、開発者によるこの 2 年前の一種の「ハック」を参照してください。彼の解決策は、目に見える要素だけに石積みを適用することです。

于 2012-10-23T12:18:30.290 に答える