admin管理员组

文章数量:1316845

Following is html code of two pages where in one page i have written data-filter attribute which i need to apply in other html page. The way i have done it's not working.

<div class="grid_12" id="category-nav">
<ul id="category" class="list-of-links centered">
    <li><a href="otherpage.html" class="current-cat" data-filter="rondvaart">Rondvaart</a></li>
    <li><a href="otherpage.html" data-filter="wandelingen">Wandelingen</a></li>
    <li><a href="otherpage.html" data-filter="rondleidingen">Rondleidingen</a></li>
    <li><a href="otherpage.html" data-filter="groepsarrangementen">Groepsarrangementen</a></li>
</ul>

The HTML code for otherpage.html is

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

</article><!-- End article.post -->
<article class="post" data-cat="rondleidingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

Javascript/Jquery is:

var posts = $('.post');
posts.hide();

$( "#category li a" ).click(function() { 

    var customType = $( this ).data('filter'); 
    console.log(customType);
    console.log(posts.length); 

    posts
        .hide()
        .filter(function () {
            return $(this).data('cat') === customType;
        })
        .show();
});

Following is html code of two pages where in one page i have written data-filter attribute which i need to apply in other html page. The way i have done it's not working.

<div class="grid_12" id="category-nav">
<ul id="category" class="list-of-links centered">
    <li><a href="otherpage.html" class="current-cat" data-filter="rondvaart">Rondvaart</a></li>
    <li><a href="otherpage.html" data-filter="wandelingen">Wandelingen</a></li>
    <li><a href="otherpage.html" data-filter="rondleidingen">Rondleidingen</a></li>
    <li><a href="otherpage.html" data-filter="groepsarrangementen">Groepsarrangementen</a></li>
</ul>

The HTML code for otherpage.html is

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

</article><!-- End article.post -->
<article class="post" data-cat="rondleidingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

Javascript/Jquery is:

var posts = $('.post');
posts.hide();

$( "#category li a" ).click(function() { 

    var customType = $( this ).data('filter'); 
    console.log(customType);
    console.log(posts.length); 

    posts
        .hide()
        .filter(function () {
            return $(this).data('cat') === customType;
        })
        .show();
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 2, 2014 at 10:59 Super Hornet 2,90755 gold badges3030 silver badges5858 bronze badges asked Feb 2, 2014 at 10:49 ITGeekITGeek 4511 gold badge44 silver badges1212 bronze badges 6

• It's not taking data-filter's value from page where it is given?what's the problem or any alternative for above? – ITGeek Commented Feb 2, 2014 at 10:55
• You mean when you click on a link the relative data is not storing in customType from var customType = $( this ).data('filter'); ? – Suman Bogati Commented Feb 2, 2014 at 11:08
• 1 please add the actual question to your question. – xlembouras Commented Feb 2, 2014 at 11:08
• If i click on Wandelingen link,it should redirect to otherpage.html and filter but it's not happening in above code,that's actual question – ITGeek Commented Feb 2, 2014 at 11:13
• @user2696142 any ment about my answer? – Ergec Commented Feb 3, 2014 at 12:10

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

Your problem is you are redirection on click to otherpage.html without any info about your data filter. Also it's way simpler to do this in one page not two. Check this fiddle out

http://jsfiddle/ergec/kwPLp/

For two page setup

First page HTML only, no javascript

<ul id="category" class="list-of-links centered">
    <li><a href="otherpage.html#rondvaart" class="current-cat" data-filter="">Rondvaart</a></li>
    <li><a href="otherpage.html#wandelingen" data-filter="">Wandelingen</a></li>
    <li><a href="otherpage.html#rondleidingen" data-filter="">Rondleidingen</a></li>
    <li><a href="otherpage.html#groepsarrangementen" data-filter="">Groepsarrangementen</a></li>
</ul>

Second Page (otherpage.html)

HTML

<article class="post" id="rondvaart">
    <header>
        <p class="byline">Rondvaart</p>
         <h2>rondvaart</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="wandelingen">
    <header>
        <p class="byline">wandelingen</p>
         <h2>wandelingen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="rondleidingen">
    <header>
        <p class="byline">rondleidingen</p>
         <h2>rondleidingen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="groepsarrangementen">
    <header>
        <p class="byline">groepsarrangementen</p>
         <h2>groepsarrangementen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->

Javascript

var hash = window.location.hash;
hash = hash.split("#");
hash = hash[1];
var posts = $('.post');
posts.hide();
$("#" + hash ).show();

本文标签： javascriptusing datafilter attributeStack Overflow