jQuery data attribute click event

Question

I have made a quick fiddle to outline my problem: http://jsfiddle.net/mYdxw/

I'm trying to click on a div, grab its data attribute and show its corresponding set of divs.

Can anyone spot why it isn't doing this currently?

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>

Always include the relevant code/markup in the question itself. Why: meta.stackexchange.com/questions/118392/… — T.J. Crowder
– T.J. Crowder, Commented Jan 16, 2012 at 23:05

Liam · Accepted Answer · 2012-01-16 23:17:25Z

15

Just to improve on the code, jQuery provides .data() to retrieve the value of the dataset so instead of using attr() use data()

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

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

answered Jan 16, 2012 at 23:17

Liam

2,83725 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Liam Over a year ago

The above code is HTML 5 compliant and jQuery effort towards making life easier for developers.tutorialzine.com/2010/11/jquery-data-method

user1106925 Over a year ago

@benhowdle89: All it does is import the data attribute into jQuery's .data() system. If all you're going to do is read the data, it really doesn't make a difference. Since you're already using data- attributes, you're already HTML5 compliant. jQuery doesn't actually use the HTML5 dataset property to read the data. But after enough browsers support it, you'll be able to do this.dataset.target_category to retrieve the data.

Liam Over a year ago

Well right but its always nice to have toolset to play around, its my personal opinion.

user1106925 Over a year ago

Sure. I'm just saying that unless you actually have a use for it in jQuery's data cache, it doesn't make too much difference. Ultimately the best way to access it will be with the dataset property, but that won't be until there's enough support.

user1106925 · Accepted Answer · 2012-01-16 23:04:40Z

14

This...

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

should be this...

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

The space is interpreted as a descendant selector, but the data-category is directly on the itemLinks element, not on a descendant.

I also added quotes around the value of the attribute selector. The API requires it.

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

answered Jan 16, 2012 at 23:04

community wiki

user1106925

Collectives™ on Stack Overflow

jQuery data attribute click event

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related