isotope filter to link from another page

问题

i'm working on jquery isotope and the filter works just fine using the method given below on the same page 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>

What i'm trying to achieve is to link to a specific category so that my users can come from other pages to the filtered category.

i tried the following linking method but it didn't work:

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

can anyone help me out? is there any method to pre-filter the categories?

回答1:

After you configure isotope you need to read the querystring variable and then click the filter button that matches.

jsFiddle Example: http://jsfiddle.net/Y6vWn/

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

回答2:

Bill-

I tried your method and can't seem to make it work. Are those two lines all that are necessary?

Here is the menu HTML for the link to my isotope filtered page:

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

Here is the code for my filters (IDs not being used here):

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

And here is the script I put at the end of the filtered page:

<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();
    }
});

I intend to have the page choose a different filter based on what comes after the hashtag in the URL. Is there a smarter way to go about this?

来源：https://stackoverflow.com/questions/10562283/isotope-filter-to-link-from-another-page

标签

jquery

filter

jquery-isotope