来自不同页面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

只是为了链接，rot，等等，我会把它复制到这里。我使用了jQuery cookie插件，创建并销毁了一个cookie，该cookie通过过滤器传递给包含同位素的页面。在我的例子中，header.php的每个页面上都有一个永久的过滤器主菜单。然而，我使用这段代码根据用户是在主页(上面有Isotope )还是在另一个页面上，为菜单提供了不同的类；

<?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

来看看它的实际效果，一个解释。主页上有Isotope，“Work”标题下的所有条目都是Isotope过滤器。“关于”标题是一个可湿性粉剂菜单，点击“关于”下面的一个链接，你就会进入不同的可湿性粉剂页面。在该页面上，您将检查工作过滤器列表上的标记的更改- 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)上做到了这一点。看看报头右边的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相同的日期过滤器属性的链接，并向其中添加“active”类。