Question

我正在使用jquery同位素，过滤器在同一页面portfolio.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>

任何人都可以帮助我吗？是否有任何预过滤类别的方法？

Answer 1

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

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

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

Answer 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中的hashtag之后的内容选择不同的过滤器。有更明智的方法吗？

同位素过滤器从另一页链接

2 个答案: