2

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

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

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

4

1 回答 1

2

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

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

只是为了链接腐烂等，我会在这里复制它。我使用了 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 过滤同位素，然后将其销毁。它所在的网站是；

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

在行动中看到它的解释。主页上有同位素，“工作”标题下的所有条目都是同位素过滤器。“关于”标题是一个 WP 菜单，单击“关于”下的其中一个链接，您将被带到不同的 WP 页面。在该页面上，您将检查 Work 过滤器列表中标记的更改 - 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 向用户显示过滤器处于活动状态？

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

当按下链接时，此脚本会清除带有 id 的无序列表中包含的链接中的所有类，filters并在重新触发 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找到具有与 cookie 相同的 date-filter 属性的链接，并向其中添加“活动”类。

于 2012-09-26T15:17:51.267 回答