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

Question

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

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

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

Answer 1

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

Isotope Filtering from different Wordpress Page

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

<?php

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

?>

然后更改了 Javascript，如果单击的链接是 cookiefilter 菜单的一部分(即在同位素页面之外)，则将触发 #cookiefilter a 单击事件并创建 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 向用户显示过滤器处于事件状态？

我已经使用以下 JS 在自己的主页 ( http://www.mcnab.co ) 上完成了此操作。查看 header 右侧的 Magento、Wordpress、Joomla 部分。这些是同位素过滤器。

当按下链接时，此脚本会清除 ID 为 filters 的无序列表中包含的链接中的所有类，并在重新启动 Isotope 之前将类“active”添加到单击的链接中；

    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 相同的 date-filter 属性的链接，并添加“active”类对此。