来自不同页面 WordPress 的 jQuery 同位素过滤器

我正在尝试从完全不同的页面过滤到我的同位素所在的位置。

目前，我正在成功调用同位素：

 $(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

我已经为你找到了答案 - 我写了一篇关于它的博客文章；

来自不同 WordPress 页面的同位素过滤

只是为了链接失效等，我将其复制到这里。我使用了 jQuery cookie 插件并创建并销毁了一个 cookie，该 cookie 通过过滤器传递到包含同位素的页面。就我而言，header.php 中的每个页面上都有一个永久的过滤器主菜单。但是，我使用此代码根据用户是在主页（上面有同位素）还是其他页面上为菜单指定不同的类；

<?php

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

?>

然后 Javascript 被更改，这样如果被单击的链接是 cookiefilter 菜单的一部分（即在同位素页面之外），那么#cookiefilter aclick 事件被触发并创建了一个 cookie。下面的代码块根据 cookie 过滤 Isotope，然后销毁它。它所在的网站是；

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

要查看它的实际操作，请进行解释。主页上有同位素，“工作”标题下的所有条目都是同位素过滤器。 “关于”标题是一个 WP 菜单，单击“关于”下的其中一个链接，您将进入不同的 WP 页面。在该页面上，您将检查工作过滤器列表上标记的更改 - ul 类已更改，现在是；

<ul class="cookiefilter">

而不是;

<ul class="filters">

这是重要的一点，因为在下面的 JS 中，点击事件#filters a与点击事件的行为不同#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;
    }

将“Active”类添加到链接

根据评论提供更多信息。一个好问题，如何向活动过滤器添加一个类，以便可以应用 CSS 向用户显示过滤器处于活动状态？

我已经在自己的主页上做到了这一点（http://www.mcnab.co）使用以下 JS。查看标头右侧的 Magento、Wordpress、Joomla 部分。这些是同位素过滤器。

该脚本清除 id 无序列表中包含的链接中的所有类filters当按下链接时，在重新启动同位素之前将“活动”类添加到单击的链接中；

    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 相同的日期过滤器属性的链接，并向其添加“活动”类。