jQuery '.each' e allegando evento '.click'

Non sono un programmatore, ma mi piace costruire prototipi. Tutta la mia esperienza deriva da ActionScript2.jQuery '.each' e allegando evento '.click'

Ecco la mia domanda. Per semplificare il mio codice vorrei capire come allegare eventi '.click' a div che sono già esistenti nel corpo HTML.

<body> 
<div id="dog-selected">dog</div> 
<div id="cat-selected">cat</div> 
<div id="mouse-selected">mouse</div> 

<div class="dog"><img></div> 
<div class="cat"><img></div> 
<div class="mouse"><img></div> 
</body>

mio (non) strategia era:
1) fa un array di oggetti:

var props = { 
"dog": "false", 
"cat": "true", 
"mouse": "false" 
};

2) scorrere l'array con '.each' e aumentare ogni div esistente con un ' .click 'evento. Infine, costruisci una variabile locale.

ecco un prototipo:

$.each(props, function(key, value) {  
$('#'+key+'-selected').click(function(){ 
var key = value; 
}); 
});

fonte

2013-09-23 hcc

È [questo] (http://jsfiddle.net/Jwqfg/) che cosa stai cercando? – karthikr

Sembra funzionare, qual è il problema? http://jsfiddle.net/PV7Gj/ –

Il tuo codice fa già tutto ciò che è codificato per fare. hai davvero voluto fare qualcosa con la variabile chiave all'interno dell'evento click? –

Una soluzione è possibile utilizzare è quello di assegnare una classe più generalizzato a qualsiasi div si desidera che il gestore di eventi click legato a.

Ad esempio:

HTML:

<body> 
<div id="dog" class="selected" data-selected="false">dog</div> 
<div id="cat" class="selected" data-selected="true">cat</div> 
<div id="mouse" class="selected" data-selected="false">mouse</div> 

<div class="dog"><img/></div> 
<div class="cat"><img/></div> 
<div class="mouse"><img/></div> 
</body>

JS:

$(".selected").each(function(index) { 
    $(this).on("click", function(){ 
     // For the boolean value 
     var boolKey = $(this).data('selected'); 
     // For the mammal value 
     var mammalKey = $(this).attr('id'); 
    }); 
});

fonte

2013-09-23 18:41:41

È interessante includere le variabili in div? è un codice HTML valido? Grazie per tutto il personale di input! Nell'atto di scrivere questo prototipo e post, sembra che abbia risolto il problema. Effettivamente fa mosto bene! ma grazie a tutti per i vostri contributi! – hcc

Queste non sono così tante variabili, come attributi. L'id e la classe sono piuttosto standard, ma puoi aggiungere dati- {nome} agli elementi e accedere al contenuto con $ (this) .data ('{nome}'); Questo è valido html5. –

Wow Man, ha funzionato è piaciuto un fascino, soluzione semplice ed eccellente !!! –

Non c'è bisogno di usare .each. click si associa già a tutte le occorrenze div.

$('div').click(function(e) { 
    ..  
});

See Demo

Nota: uso duro vincolante come .click per assicurarsi che gli elementi caricati dinamicamente non vengono vincolati.

fonte

2015-11-19 23:46:02 Oriol

Questa dovrebbe essere la risposta, a meno che non sia necessario l'indice dalla risposta sopra. – Tunn

Sì ma non funzionerà sugli archivi quando si ha un pulsante su ciascuna voce. – Dev

@Oriol ha ragione, l'altro modo è usare la funzione jQuery di on() '. In questo modo funzionerà con contenuti caricati dinamici. – another

jQuery '.each' e allegando evento '.click'

risposta

Problemi correlati