同位素过滤器从另一个页面链接答案

【问题标题】：isotope filter to link from another page同位素过滤器从另一个页面链接
【发布时间】：2012-05-12 08:52:40
【问题描述】：

我正在研究 jquery isotope，过滤器使用下面在同一页面上给出的方法来很好地工作。html：

<li class="current"><a href="#" data-filter="*">all</a></li>
<li><a href="#" data-filter=".design">design</a></li>
<li><a href="#" data-filter=".coding">coding</a></li>
<li><a href="#" data-filter=".logo">logo</a></li>

我想要实现的是链接到特定类别，以便我的用户可以从其他页面访问过滤后的类别。

我尝试了以下链接方法，但没有成功：

<a href="portfolio.html#filter=logo" data-filter=".logo">logo</a>

谁能帮帮我？有什么方法可以预先过滤类别吗？

【问题讨论】：

标签： jquery filter jquery-isotope

【解决方案1】：

配置同位素后，您需要读取查询字符串变量，然后单击匹配的过滤器按钮。

jsFiddle 示例：http://jsfiddle.net/Y6vWn/

var filterFromQuerystring = getParameterByName('filter');
$('a[data-filter=".' + filterFromQuerystring  + '"]').click();

【讨论】：

那么为了清楚起见，您链接到的页面更像这样：<a href="portfolio.html?filter=logo" data-filter=".logo">logo</a> - 使用查询字符串，而不是问题中的哈希。

【解决方案2】：

比尔-

我尝试了您的方法，但似乎无法成功。这两行都是必需的吗？

这是我的同位素过滤页面链接的菜单 HTML：

<li><a href="entertainment.html">Entertainment</a>
     <ul>
        <li><a href="entertainment.html#party">Party bands, Show and Tribute bands</a></li>
        <li><a href="entertainment.html#classical">Classical, Jazz, and Easy Listening</a></li>
        <li><a href="entertainment.html#djs">DJs, Emcees, Variety, and Interactive</a></li>
    </ul>
</li>

这是我的过滤器的代码（此处未使用 ID）：

<div id="filters">
<ul class="option-set" data-option-key="filter">
    <li><a id="f-all" href="#filter" class="selected" data-option-value="*">All</a></li>
    <li><a id="f-party" href="#filter" data-option-value=".party">Party Bands</a></li>
    <li><a id="f-classical" href="#filter" data-option-value=".classical">Classical, Jazz, and Easy Listening</a></li>
    <li><a id="f-djs" href="#filter" data-option-value=".djs">DJs and Emcees</a></li>
</ul>

这是我放在过滤页面末尾的脚本：

<script type="text/javascript">
$(document).ready(function() {
    var pathname = window.location;
    alert(pathname.toString()); //testing purposes
    if(pathname.toString().indexOf("party") != -1){
        alert('shit went through 9'); //testing purposes

        var filterFromQuerystring = 'party'; // getParameterByName('filter');
        $('a[data-option-value=".' + filterFromQuerystring  + '"]').click();
    }
});

我打算让页面根据 URL 中主题标签之后的内容选择不同的过滤器。有没有更聪明的方法来解决这个问题？

【讨论】：

如果您将代码放入jsFiddle，我会为您工作。