.click () Callback-Referenzen lokale Variable aus dem Aufruf der Methode anstelle des Kopierens von Wert

Question

Die folgende jQuery JavaScript-Code auf einer ansonsten leeren Seite enthalten ist.

var element;
$(function() {
  for (var i = 0; i < 10; i++) {
    element = $('<div>' + i + '</div>');
    element.click(function() {
      alert(i);
    });
    $('body').append(element);
  }
});

Das gewünschte Verhalten ist, dass dieser Code 10 div Elemente von 0 bis 9 nummeriert erzeugen sollten, wenn Sie auf einem div-Element klicken, wird ein Alarm Popup die Anzahl des div-Elements zeigen Sie auf geklickt haben (dh wenn ein Benutzer klickt auf das div-Element '4' bezeichnet, sollte der Alarm Popup zeigt die Nummer 4).

Der Alarm Popup stattdessen zeigt die Nummer 10 unabhängig davon, welche div Element angeklickt wird.

Wie kann ich diesen Code ändern, um sie in der gewünschten Art und Weise zu machen verhalten?

Answer 1

Sie müssen die Variable als Funktion Parameter zu übergeben.

Zum Beispiel:

function buildElement(i) {
    var element = $('<div>' + i + '</div>');
    element.click(function() {
        alert(i);
    });
    $('body').append(element);
}

$(function() {
    for (var i = 0; i < 10; i++) {
        buildElement(i);
    }
});

Sie können dies auch mit einer Inline-anonyme Funktion, wie folgt aus:

$(function() {
    for (var i = 0; i < 10; i++) {
        (function(i) {
            var element = $('<div>' + i + '</div>');
            element.click(function() {
                alert(i);
            });
            $('body').append(element);
        })(i);
    }
});

Answer 2

Normalerweise verstecken ich die Nummer in einer ID und bekommen es in einigen strukturierten Art und Weise aus:

$(function() {
    for (var i = 0; i < 10; i++) {
        element = $('<div id="id-'+i+'">' + i + '</div>');
        element.click(function() {
            alert($(this).attr('id').split('-')[1]);
        });
        $('body').append(element);
    }
});

Answer 3

Sie können 1 von zwei Dinge tun. Sie könnten den Inhalt des div zur Ausgabe verwenden oder man könnte den Index in dem Array von einem Wähler greifen.

Dies ist ein Beispiel für den Inhalt:

element.click(function() {
  alert($(this).text());
});

oder für den Index:

element.click(function() {
  alert($('div').index(this));
});

ich glaube, beide funktionieren sollte