jQuery ‘.each’ und Anhängen des ‘.click’-Ereignisses

Lesezeit: 3 Minuten

Ich bin kein Programmierer, aber ich genieße es, Prototypen zu bauen. Meine ganze Erfahrung stammt aus actionScript2.

Hier ist meine Frage. Um meinen Code zu vereinfachen, möchte ich herausfinden, wie ‘.click’-Ereignisse an Divs angehängt werden, die bereits im HTML-Body vorhanden sind.

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

Meine (fehlgeschlagene) Strategie war:
1) Erstellen Sie ein Array von Objekten:

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

2) das Array mit „.each“ durchlaufen und jedes vorhandene div mit einem „.click“-Ereignis erweitern. Erstellen Sie zuletzt eine lokale Variable.

hier ist ein prototyp:

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

  • Ist Dies Wonach suchen Sie ?

    – karthikr

    23. September 2013 um 18:30 Uhr

  • Das scheint zu funktionieren, was ist das Problem? jsfiddle.net/PV7Gj

    – Jason P

    23. September 2013 um 18:35 Uhr

  • Ihr Code erledigt bereits alles, wofür er codiert ist. Wollten Sie eigentlich etwas mit der Schlüsselvariable innerhalb des Click-Ereignisses machen?

    – Kevin B

    23. September 2013 um 18:36 Uhr

Benutzer-Avatar
Neil.Allen

Eine Lösung, die Sie verwenden könnten, besteht darin, jedem div, an das der Click-Ereignishandler gebunden werden soll, eine allgemeinere Klasse zuzuweisen.

Zum Beispiel:

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

  • Interessant können Sie Variablen in div’s einschließen? ist das gültiges HTML? Danke für all die Inputs Leute! Beim Schreiben dieses Prototyps und Postens scheine ich das Problem gelöst zu haben. In der Tat tut es gut! aber danke euch allen für eure beiträge!

    – Hcc

    25. September 2013 um 11:36 Uhr


  • Dies sind weniger Variablen als vielmehr Attribute. Die ID und die Klasse sind ziemlich Standard, aber Sie können data-{name} an Elemente anhängen und mit $(this).data(‘{name}’); auf den Inhalt zugreifen; Dies ist gültiges HTML5.

    – Neil.Allen

    25. September 2013 um 13:31 Uhr

Keine Notwendigkeit zu verwenden .each. click bindet schon an alle div Vorkommnisse.

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

Siehe Demo

Hinweis: Verwenden Sie eine harte Bindung wie z .click um sicherzustellen, dass dynamisch geladene Elemente nicht gebunden werden.

  • Ja, aber das funktioniert nicht bei Archiven, wenn Sie eine Schaltfläche für jeden Eintrag haben.

    – Entw

    26. September 2017 um 23:42 Uhr

  • @Oriol hat Recht, der andere Weg ist die Verwendung on() jQuery-Funktion. Auf diese Weise funktioniert es mit dynamisch geladenen Inhalten.

    – Ein weiterer

    10. Januar 2018 um 15:19 Uhr


  • Diese Erklärung hat mir sehr geholfen, danke.

    – Teilzeitschildkröte

    16. März 2021 um 20:16 Uhr

1283310cookie-checkjQuery ‘.each’ und Anhängen des ‘.click’-Ereignisses

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy