使用数据筛选器属性

Question

下面是两个页面的 html 代码，在其中一个页面中，我编写了需要应用于其他html页面的数据筛选器属性。我这样做是行不通的。

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

​

用于otherpage.html的HTML代码是

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

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

Answer 1

您的问题是，您是重定向的点击到otherpage.html，而没有任何信息，您的数据过滤器。而且，在一页而不是两页中这样做更简单。看看这把小提琴

http://jsfiddle.net/ergec/kwPLp/

用于两页设置

仅限首页，没有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>

第二页(otherpage.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();