jQuery的数据属性单击事件

我已经做了一个快速小提琴勾勒出我的问题：http://jsfiddle.net/mYdxw/jQuery的数据属性单击事件

我想点击一个div，抓住它的数据属性和显示其相应集的div。

任何人都可以发现，为什么不这样做，目前它是什么？

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

来源

2012-01-16 benhowdle89

始终在这个问题本身*相关的代码/标记*。为什么：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question – 2012-01-16 23:05:25

这...

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

应该是这样的......

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

的空间被解释为后代选择，但data-category直接是itemLinks元素上，而不是一个后代。

我还添加了周围的属性选择的值引号。 API需要它。

DEMO：http://jsfiddle.net/mYdxw/11/

来源

2012-01-16 23:04:40

只是为了提高对码，jQuery提供。数据（）来检索数据集的值，从而代替使用attr的（）的使用数据（）

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

DEMO：http://jsfiddle.net/mYdxw/28/

来源

2012-01-16 23:17:25 Abhi

以任何方式这更好的？ – benhowdle89 2012-01-16 23:37:32

上面的代码是HTML 5的努力，使生活更容易developers.http兼容和jQuery努力：//tutorialzine.com/2010/11/jquery-data-method/ – Abhi 2012-01-16 23:44:06

@ benhowdle89：它所做的就是将数据导入到属性jQuery的'.data（）'系统。如果你所要做的只是读取数据，它确实没有什么区别。由于您已经在使用'data-'属性，因此您已经符合HTML5。 jQuery实际上并不使用HTML5'dataset'属性来读取数据。但是在有足够的浏览器支持它之后，您可以执行'this.dataset.target_category'来检索数据。 – 2012-01-16 23:54:47

jQuery的数据属性单击事件

回答

相关问题