2

まったく別のページから、アイソトープがある場所までフィルタリングしようとしています。

現在、私はアイソトープを正常に呼び出しています：

 $(function() {
    // cache container
    var $container = $('.isotope-container');
    var $defaultfilter = $('.feature-this');
    $('.isotope-container').isotope({
      filter: '.feature-this',
      masonry: { columnWidth: 326, resizesContainer: false }
    });

    // filter items when filter link is clicked
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      return false;
    });
    // set selected menu items
   var $optionSets = $('.option-set'),
       $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('.option-set');
   $optionSet.find('.selected').removeClass('selected');
   $this.addClass('selected'); 
  });
});

次のようなマークアップを使用して、リンクがクリックされたときに別のページから結果をフィルタリングしたいと思います。

    <ul>
        <li><a href="/isotope/#filter=.filter1">Filter 1</a></li>
        <li><a href="/isotope/#filter=.filter2">Filter 2</a></li>
        <li><a href="/isotope/#filter=.filter3">Filter 3</a></li>
        <li><a href="/isotope/#filter=.filter4">Filter 4</a></li>
        <li><a href="/isotope/#filter=.filter5">Filter 5</a></li>
    </ul>

私はそれを働かせることができません。ここでは希望どおりに機能しますが、別のページからは機能しません。

http://isotope.metafizzy.co/demos/hash-history.html

4

1 に答える 1

2

私はあなたのための答えを持っています - 私はそれについてブログ記事を書きました;

別のWordpressページからの同位体フィルタリング

リンクの腐敗などのために、ここにコピーします。jQuery Cookie プラグインを使用して、Isotope を含むページにフィルターを通過する Cookie を作成して破棄しました。私の場合、header.php の各ページにフィルターの常設メイン メニューがありました。ただし、このコードを使用して、ユーザーがホーム ページ (Isotope を含む) にアクセスしているか、別のページにアクセスしているかに応じて、メニューに異なるクラスを与えました。

<?php

if (is_front_page()) {
   echo '<ul id="filters">';
} else {
   echo '<ul id="cookiefilter">';
}

?>

その後、JavaScript が変更され、クリックされたリンクが cookiefilter メニューの一部 (Isotope ページ以外) の場合、#cookiefilter aクリック イベントが発生し、Cookie が作成されるようになりました。以下のコード ブロックは、Cookie に基づいて Isotope をフィルター処理し、破棄します。それが載っているサイトは;

http://www.face-educationmarketing.co.uk

実際にそれを見るために説明します。ホームページには Isotope があり、'Work' ヘッダーの下のすべてのエントリは Isotope フィルターです。「About」ヘッダーは WP メニューです。「About」の下にあるこれらのリンクのいずれかをクリックすると、別の WP ページに移動します。そのページで、Work フィルター リストのマークアップの変更を調べます。ul クラスが変更されました。現在は変更されています。

<ul class="cookiefilter">

それよりも;

<ul class="filters">

#filters a以下の JS では、クリック イベントの動作がクリック イベントの動作と異なるため、これは重要なビットです。#cookiefilter a

後者の場合、フィルタ名を含む Cookie が作成されます。onload JS は、そのような Cookie が存在するかどうかを確認し、存在する場合は Isotope を呼び出し、Cookie の値でフィルター処理してから Cookie を破棄し、通常のフィルターが機能するようにします。これがJSです。

    // filter items when filter link is clicked
    $('#filters a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });

    // Set cookie based on filter selector
    $('#cookiefilter a').click(function(){
        var selector = $(this).attr('data-filter');
        $.cookie("listfilter", selector, { path: '/' });
    });

    if ( $.cookie("listfilter") ) {
        $container.isotope({ filter: $.cookie("listfilter") });
        $.cookie("listfilter", null, { path: '/' });
        return false;
    }

リンクへの「アクティブ」クラスの追加

コメントに基づく詳細情報。良い質問です。アクティブなフィルターにクラスを追加して、CSS を適用してユーザーにフィルターがアクティブであることを示すにはどうすればよいでしょうか?

次の JS を使用して、自分のホームページ ( http://www.mcnab.co ) でそれを行いました。マストヘッドの右側にある Magento、Wordpress、Joomla セクションをご覧ください。それらは同位体フィルターです。

このスクリプトは、リンクが押されたときに id を持つ順序付けられていないリストに含まれるリンクからすべてのクラスをクリアし、filtersIsotope を再起動する前に、クリックされたリンクにクラス「アクティブ」を追加します。

    var $filterlist = $('ul#filters');
    // filter items when filter link is clicked
    $('#filters a').click(function(){
        $this = $(this);

        var selector = $(this).attr('data-filter');

        // Remove classes from all filters
        $filterlist.find('a').each(function(){
            $(this).removeClass();
        }); 

        // add active class to clicked filter
        $this.addClass('active');

        // refire isotope using the newly clicked filter
        $container.isotope({ filter: selector });
        return false;
    });

別のページからこれを行うには#cookiefilter a、Cookie と同じ日付フィルター属性を持つリンクを見つけた同様のスクリプトを追加し、それに「アクティブ」クラスを追加します。

于 2012-09-26T15:17:51.267 に答える