jQuery数据属性点击事件

Question

我已经快速制作了一个小例子来描述我的问题：http://jsfiddle.net/mYdxw/ 我试图点击一个div，获取它的数据属性，并显示相应的一组div。

有人能发现目前为什么无法实现这个操作吗？ JS

$(document).ready(function() {

    $('.categoryItems').click(function() {
        $('.itemLinks').hide();
        var target_category = $(this).attr('data-target_category');
        $('.itemLinks [data-category=' + target_category + ']').show();
    });
});

HTML

<div id="categories">
    <div data-target_category="html-site-templates" class="categoryItems">HTML Site Templates</div>
    <div data-target_category="jquery-plugins" class="categoryItems">jQuery Plugins</div>
    <div data-target_category="tumblr-themes" class="categoryItems">Tumblr Themes</div>
    <div data-target_category="wordpress-themes" class="categoryItems">WordPress Themes</div>    
</div>

<div id="content">
    <a class="itemLinks" data-category="tumblr-themes" href="/tumblr-themes/mini-tumblr-theme/">Mini Tumblr Theme</a>
    <a class="itemLinks" data-category="jquery-plugins" href="/jquery-plugins/randomr-jquery-plugin/">Randomr jQuery Plugin</a>
    <a class="itemLinks" data-category="wordpress-themes" href="/wordpress-themes/redux-wp-theme/">Redux WP Theme</a>
</div>

- benhowdle89

---

请在问题本身中始终包含相关的代码/标记。为什么：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question - T.J. Crowder

Answer 1

为了改进代码，jQuery提供了.data()方法来检索数据集的值，因此可以使用data()代替attr()

 var target_category = $(this).data('target_category');

演示：http://jsfiddle.net/mYdxw/28/

- Liam

---

以上代码符合HTML 5标准，并且是jQuery为了让开发人员更轻松而努力的成果。http://tutorialzine.com/2010/11/jquery-data-method/ - Liam

@benhowdle89：它所做的就是将数据属性导入到jQuery的.data()系统中。如果你要做的只是读取数据，那么这并没有什么区别。由于你已经在使用data-属性，所以你已经符合HTML5标准了。jQuery实际上并不使用HTML5的dataset属性来读取数据。但是在足够多的浏览器支持它之后，你将能够使用this.dataset.target_category来检索数据。 - user1106925

虽然这是正确的，但拥有一套工具集来玩耍总是很不错，这是我的个人观点。 - Liam

当然，我只是想说，除非您确实在jQuery的数据缓存中使用它，否则它并没有太大的差别。最终访问它的最佳方式将是使用“dataset”属性，但这要等到有足够的支持。 - user1106925

Answer 2

这个...

$('.itemLinks [data-category=' + target_category + ']').show();

应该是这样的...

$('.itemLinks[data-category="' + target_category + '"]').show();

空格被解释为“后代选择器”，但“data-category”直接在“itemLinks”元素上，而不是在后代上。

我还在属性选择器的值周围添加了引号。API要求这样做。

演示：http://jsfiddle.net/mYdxw/11/

- user1106925