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，它将过滤器传递给包含Isotope的页面。在我的例子中，header.php中的每个页面都有一个永久的过滤器主菜单。但是，我使用此代码为菜单提供了一个不同的类，具体取决于用户是在主页上（其上有同位素）还是其他页面;

<?php

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

?>

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

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

在行动中看到它的解释。主页上有Isotope，“Work”标题下的所有条目都是同位素过滤器。 “关于”标题是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;
    }

在链接中添加“有效”课程

基于评论的更多信息。一个很好的问题，如何在活动过滤器中添加一个类，以便您可以应用CSS向用户显示过滤器是否处于活动状态？

我已经在我自己的主页（http://www.mcnab.co）上使用以下JS完成了这项工作。看看标头右侧的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”类。

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

1 个答案: