jQuery डेटा घटना

Question

क्लिक मैं मेरी समस्या की रूपरेखा तैयार करने के लिए एक त्वरित बेला बना दिया है विशेषता।

क्या कोई यह बता सकता है कि यह वर्तमान में ऐसा क्यों नहीं कर रहा है?

जे एस

$(document).ready(function() { 

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

एचटीएमएल

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

Answer 1

यह ...

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

इस होना चाहिए ...

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

अंतरिक्ष एक वंशज चयनकर्ता रूप में व्याख्या की है, लेकिन data-category, itemLinks तत्व पर सीधे है वंश पर नहीं।

मैंने विशेषता चयनकर्ता के मूल्य के चारों ओर उद्धरण भी जोड़े। एपीआई के लिए इसकी आवश्यकता है।

डेमो:http://jsfiddle.net/mYdxw/11/

Answer 2

बस कोड पर सुधार करने के लिए, jQuery attr का उपयोग करने का तो बजाय डेटासेट के मूल्य को पुनः प्राप्त करने .data() प्रदान करता है() डेटा()

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

का उपयोग

डेमो: http://jsfiddle.net/mYdxw/28/