jQuery ".each" i dołączanie zdarzenia ".click"

Nie jestem programistą, ale lubię budować prototypy. Całe moje doświadczenie pochodzi z ActionScript2.jQuery ".each" i dołączanie zdarzenia ".click"

Oto moje pytanie. Aby uprościć mój kod, chciałbym dowiedzieć się, jak dołączyć zdarzenia ".click" do div, które już istnieją w treści 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>

my (nie), strategia była:
1) stanowią szereg obiektów:

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

2) iterację tablicy z '.each' i zwiększać każdy istniejący div z ' .click "wydarzenie. Na koniec skonstruuj zmienną lokalną.

o to prototyp:

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

Źródło

2013-09-23 hcc

Czy to jest to (http://jsfiddle.net/Jwqfg/), czego szukasz? – karthikr

To wydaje się działać, na czym polega problem? http://jsfiddle.net/PV7Gj/ –

Twój kod robi już wszystko, do czego jest przeznaczony. Czy rzeczywiście chcesz coś zrobić z kluczową zmienną w wydarzeniu kliknięcia? –

Jednym z rozwiązań można użyć jest przypisanie bardziej uogólniony klasę do każdego div chcesz procedurę obsługi zdarzenia kliknięcia związany.

Na przykład:

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'); 
    }); 
});

Źródło

2013-09-23 18:41:41

Interesujące czy możesz zawrzeć zmienne w div? czy to jest prawidłowy HTML? Dziękuję wszystkim uczestnikom! W akcie pisania tego prototypu i postu wydaje mi się, że udało mi się rozwiązać problem. Rzeczywiście to brzeczka w porządku! ale dziękuję wam wszystkim za wasz wkład! – hcc

To nie tyle zmienne, co atrybuty. Identyfikator i klasa są dość standardowe, ale możesz dodać dane- {nazwa} do elementów i uzyskać dostęp do zawartości za pomocą $ (this) .data ("{name}"); To jest poprawny html5. –

Wow Man, pracował lubiany urok, proste i doskonałe rozwiązanie !!! –

Nie ma potrzeby korzystania .each. click już wiąże się ze wszystkimi wystąpieniami div.

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

See Demo

Uwaga: Należy używać oprawa twarda takich jak .click aby upewnić się dynamicznie obciążonych elementów nie daj się związany.

Źródło

2015-11-19 23:46:02 Oriol

To powinna być odpowiedź, chyba że potrzebujesz indeks z powyższej odpowiedzi. – Tunn

Tak, ale to nie zadziała w archiwach, gdy masz przycisk na każdym wpisie. – Dev

@Oriol ma rację, innym sposobem jest użycie 'on()' funkcji jQuery. W ten sposób będzie działać z dynamicznie ładowaną treścią. – another

jQuery ".each" i dołączanie zdarzenia ".click"

Odpowiedz

Powiązane problemy