2012-01-16 12 views
5

ho fatto un rapido piano rispetto a delineare il mio problema: http://jsfiddle.net/mYdxw/dati jQuery attribuiscono clicca evento

che sto cercando di fare clic su un div, afferrare attribuiscono i suoi dati e mostrano la sua serie corrispondente di div.

Qualcuno può capire perché non lo sta facendo al momento?

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

Includere sempre il codice/markup pertinente * nella domanda stessa *. Perché: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question –

risposta

11

Questa ...

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

dovrebbe essere questo ...

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

Lo spazio viene interpretato come selettore discendente, ma la data-category è direttamente sull'elemento itemLinks, non su un discendente.

Ho anche aggiunto virgolette sul valore del selettore di attributo. L'API lo richiede.

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

11

solo per migliorare il codice, jQuery fornisce .data() per recuperare il valore del set di dati in modo invece di utilizzare attr() utilizzare i dati()

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

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

+0

È meglio in qualche modo? – benhowdle89

+0

Il codice sopra è conforme a HTML 5 e jQuery sforzo per semplificare la vita agli sviluppatori.http: //tutorialzine.com/2010/11/jquery-data-method/ – Abhi

+0

@ benhowdle89: tutto ciò che fa è importare l'attributo di dati in jQuery '.Data()' sistema. Se tutto quello che hai intenzione di fare è leggere i dati, in realtà non fa la differenza. Dato che stai già utilizzando gli attributi 'data-', sei già compatibile con HTML5. jQuery in realtà non usa la proprietà 'dataset' HTML5 per leggere i dati. Ma dopo averlo supportato da un numero sufficiente di browser, sarai in grado di eseguire 'this.dataset.target_category' per recuperare i dati. –