javascript 使用数据过滤器属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21509654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using data-filter attribute
提问by ITGeek
Following is htmlcode of two pages where in one page i have written data-filterattributewhich i need to apply in other html page. The way i have done it's not working.
以下是两页的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>
The HTML code forotherpage.htmlis
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/Jqueryis:
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();
});
回答by Ergec
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
您的问题是您在点击时重定向到 otherpage.html 而没有关于您的数据过滤器的任何信息。此外，在一页而不是两页中执行此操作更简单。检查这个小提琴
http://jsfiddle.net/ergec/kwPLp/
http://jsfiddle.net/ergec/kwPLp/
For two page setup
对于两页设置
First page HTML only, no javascript
仅首页 HTML，无 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)
第二页 (otherpage.html)
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
Javascript
var hash = window.location.hash;
hash = hash.split("#");
hash = hash[1];
var posts = $('.post');
posts.hide();
$("#" + hash ).show();
