dữ liệu jQuery kiện

Question

nhấp Tôi đã thực hiện một fiddle nhanh chóng phác thảo vấn đề của tôi: http://jsfiddle.net/mYdxw/

Tôi đang cố gắng để click vào một div, lấy dữ liệu thuộc tính của nó và hiển thị thiết lập tương ứng của các div.

Có ai có thể phát hiện lý do tại sao hiện tại không thực hiện việc này?

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> 

Answer 1

này ...

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

nên này ...

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

Không gian được hiểu như là một chọn hậu duệ, nhưng data-category là trực tiếp trên các yếu tố itemLinks, không phải trên một hậu duệ.

Tôi cũng đã thêm dấu ngoặc kép xung quanh giá trị của công cụ chọn thuộc tính. API yêu cầu nó.

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

Answer 2

Chỉ cần để cải thiện mã, jQuery cung cấp .data() để lấy giá trị của dữ liệu nên thay vì sử dụng attr() sử dụng dữ liệu()

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

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