来自不同页面WordPress的jQuery同位素filter

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

目前，我成功地称同位素为：

$(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'); }); }); 

我希望，从另一个页面，单击链接时过滤结果，标记如下：

  
 
Filter 1
 
Filter 2
 
Filter 3
 
Filter 4
 
Filter 5
  

我无法让它发挥作用。 它在这里工作，但不是从不同的页面：

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

Answer 1

我只有你的答案 – 我写了一篇关于它的博客文章;

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

只是链接腐烂等我会在这里复制出来。 我使用了jQuery cookie插件，创建并销毁了一个cookie，该cookie通过filter传递到包含Isotope的页面。 在我的例子中，header.php中的每个页面都有一个永久的filter主菜单。 但是，我使用此代码为菜单提供了一个不同的类，具体取决于用户是在主页上（其上有同位素）还是其他页面;

 '; } else { echo '
'; } ?> 

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

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

要在行动中看到它的解释。 主页上有Isotope，“Work”标题下的所有条目都是同位素filter。 “关于”标题是WP菜单，单击“关于”下的其中一个链接，您将进入不同的WP页面。 在该页面上，您将检查工作filter列表中标记的更改 – ul类已更改，现在是;

而不是;

这是重要的一点，因为在下面的JS中， #cookiefilter a上的单击事件与#cookiefilter a单击事件#filters a行为不同

在后一种情况下，将使用filter名称创建cookie。 onload JS检查是否存在这样的cookie，如果确实存在，则调用Isotope，使用cookie中的值对其进行过滤，然后销毁cookie，以便正常的filter工作。 这是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; } 

在链接中添加“活动”类

根据评论获得更多信息。 一个很好的问题，如何将类添加到活动filter中，以便您可以应用CSS向用户显示filter是否处于活动状态？

我已经在我自己的主页（ http://www.mcnab.co ）上使用以下JS完成了这项工作。 看看标头右侧的Magento，Wordpress，Joomla部分。 那些是同位素filter。

当按下链接时，此脚本清除带有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添加一个类似的脚本，该脚本发现带有date-filter属性的链接与cookie相同，并添加“active”类。