来自不同页面Wordpress的jQuery同位素过滤器 [英] jQuery Isotope Filter from Different Page Wordpress
问题描述
我正试图从一个完全不同的页面过滤到我的同位素所在的位置.
I'm trying to filter from an entirely different page, to where my Isotope is.
当前，我成功调用同位素:
Currently, I am calling isotope sucessfully with:
$(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');
});
});
我想从另一个页面过滤单击链接时的结果，并带有如下标记:
I would like to, from another page, filter results when a link is clicked, with a markup like:
<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>
我无法正常工作.它在这里可以正常运行，但不能在其他页面上运行:
I can't get it to work. It works as desired here, but not from a different page:
http://isotope.metafizzy.co/demos/hash-history.html
推荐答案
我为您提供了答案-我写了一篇有关它的博客文章；
I've got just the answer for you - I wrote a blog post about it;
仅用于链接腐烂等，我将其复制到此处.我使用了jQuery cookie插件，并创建并销毁了一个cookie，该cookie通过过滤器传递到包含同位素的页面.在我的情况下，header.php的每个页面上都有一个永久的过滤器主菜单.但是，我使用此代码为菜单提供了不同的类，具体取决于用户是在主页上(上面有同位素)还是在其他页面上.
Just for link rot etc I'll copy it out here. I used the jQuery cookie plugin and created and destroyed a cookie which passed over the filter to the page containing Isotope. In my case there was a permanent main menu of filters on each page in header.php. However, I used this code to give the menu a different class depending on whether the user was on the home page (which had the Isotope on it) or another page;
<?php
if (is_front_page()) {
echo '<ul id="filters">';
} else {
echo '<ul id="cookiefilter">';
}
?>
然后更改了Javascript，因此，如果单击的链接是cookiefilter菜单的一部分(即，在Isotope页面之外)，则会触发#cookiefilter a click事件并创建一个cookie.下面的代码块根据cookie过滤同位素，然后销毁它.它所在的网站是；
Then the Javascript was changed so that if the link being clicked was part of cookiefilter menu (ie off the Isotope page) then the #cookiefilter a click event was fired and a cookie created. The code block below that filters Isotope based on the cookie and then destroys it. The site it's on is;
http://www.face-educationmarketing.co.uk
查看实际操作说明.主页上有同位素，工作"标题下的所有条目都是同位素过滤器. 关于"标题是一个WP菜单，单击关于"下的那些链接之一，您将被带到不同的WP页面.在该页面上，您将检查工作"过滤器列表上标记的更改-ul类已更改，现在；
To see it in action an explanation. The home page has Isotope on it and all the entries underneath the 'Work' header are Isotope filters. The 'About' header is a WP menu, click on one of those links under 'About' and you are taken to different WP page. On that page you would examine the change in the markup on the Work filter list - the ul class has changed, it is now;
<ul class="cookiefilter">
而不是；
<ul class="filters">
这一点很重要，因为在下面的JS中，#filters a上的click事件与#cookiefilter a上的click事件的行为不同
This is the important bit because in the JS below, a click event on #filters a behaves differently to click events on #cookiefilter a
在后一种情况下，将创建一个其中包含过滤器名称的cookie. onload JS检查是否存在这样的cookie，如果存在，则会调用Isotope，使用cookie中的值对其进行过滤，然后销毁该cookie，以便正常的过滤器可以正常工作.这是JS；
In the latter case a cookie is created with the filter name in it. The onload JS checks to see if such a cookie exists, if it does then it calls Isotope, filters it with the value in the cookie and then destroys the cookie so the normal filters then work. Here's the 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向用户显示该过滤器处于活动状态?
Some more info based on the comments. A good question, how would you add a class to the active filter so that you can apply CSS to show the user that filter is active?
我已经在自己的首页( http://www.mcnab.co )上完成了此操作跟随JS.看一下刊头右侧的Magento，Wordpress，Joomla部分.那是同位素过滤器.
I've done that on my own homepage (http://www.mcnab.co) using the following JS. Have a look at the Magento, Wordpress, Joomla section on the right hand side of the masthead. Those are Isotope filters.
此脚本会在按下链接时清除ID为filters的无序列表中包含的链接中的所有类，并在清除同位素之前将活动"类添加到单击的链接中；
This script clears all classes from the links contained in the unordered list with id filters when a link is pressed and adds the class 'active' to the clicked link before refiring Isotope;
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"类.
To do this from another page you would add a similar script to the #cookiefilter a which found the link with the date-filter attribute with the same as the cookie and add the 'active' class to that.
这篇关于来自不同页面Wordpress的jQuery同位素过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
