5

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

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

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

4

2 回答 2

5

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

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

var filterFromQuerystring = getParameterByName('filter');
$('a[data-filter=".' + filterFromQuerystring  + '"]').click();
于 2012-07-08T22:23:19.763 回答
0

账单-

我尝试了您的方法，但似乎无法使其正常工作。这两行都是必需的吗？

这是指向我的同位素过滤页面的链接的菜单 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 中主题标签之后的内容选择不同的过滤器。有没有更聪明的方法来解决这个问题？

于 2012-07-17T04:25:10.450 回答