Prototyp fügen Sie Ereignis-listener

Aus irgendeinem Grund, wenn ich versuche, die Zuweisung einer actionlisetner zu der Liste der Elemente den Wert nicht-stick. Hier ist, was ich meine:

Event.observe(window, 'load', function() {
    for(i = 1; i <= $$('ul#review_list li').length; i++) {
        $('cover_' + i).observe('click', function(event) {
            alert(i);
        }); 
    }

});

So gibt es 7 Listen-Elemente in #review_list und aus irgendeinem Grund, wenn alle von der li-Elemente klicken Sie auf, bekomme ich ein alert mit dem Wert 8 für jedes element geklickt. Ich möchte jeden warnen, die Ihre jeweiligen ich-Wert. Was mache ich hier falsch?

Dank!

InformationsquelleAutor Danny | 2009-08-16
  1. 3

    Versuchen Sie dies:

    Event.observe(window, 'load', function() {
    for(i = 1; i <= $$('ul#review_list li').length; i++) {

        (function (i) { //i is passed as an argument below

            $('cover_' + i).observe('click', function(event) {
                alert(i); //creates a closure around the argument i
            });

        })(i); //pass i as an argument

    }
});

    Den Grund, warum die erste Methode nicht funktioniert, ist, weil alert(i); erstellt einen Verschluss in der Schleife variable i, die wird inkrementiert, für jedes Ereignis-Zuordnung. Zur Zeit des ersten event ausgelöst wird, wird der Wert von i, die Häufig für alle Veranstaltungen ist 8, das ist, warum Sie bekommen 8 keine Rolle, wo Sie klicken.

    In der zweiten Methode, die ich gepostet, alert(i) erstellt einen Verschluss um das argument i, die nicht geteilt werden mit anderen Ereignis-listener.

    Solltest du sowieso Lesen dieser Artikel über JavaScript-Verschlüsse um besser zu verstehen.

    • Genial! Warum war das notwendig?
    • IMO, das ist zu kompliziert. Definition ich als lokalen Wert ein besseres ided. Der Grund, warum diese Lösung funktioniert, haben Sie in meiner Antwort weiter unten.
    • RaYell, Ihre Lösung funktioniert nicht. Nicht über lokale oder Globale Variablen, es geht um Schließungen. Aber Daniel sollte hinzufügen, die var Schlüsselwort " loop sowieso, sonst kann er sich in andere Themen.
    InformationsquelleAutor Ionuț G. Stan
  2. 2

    Als Ionut G. Stan sagt, das Problem ist der Verschluss über 'ich'. RaYell ist richtig über Ihre wollen, zu erklären, dass die var (aber nicht etwa, dass die Lösung des Problems).

    Schleife auch immer wieder zu re-führt die $$ nennen, was nicht wirklich ideal und vollkommen unnötig Anrufe $ zu look-up-Elemente haben Sie bereits nachgeschaut (via $$).

    FWIW:

    Event.observe(window, 'load', function() {

    $$('ul#review_list li').each(function(elm, index) {
        ++index; //Now it's 1-based
        elm.observe('click', function(event) {
            alert(index);
        });
    });
});

    $$ sucht die Elemente, Enumerable#jeder iteriert dann über das Ergebnis den Aufruf der Funktion mit dem element Verweis und seine null-basierten index in das array. Der event-handler ist dann eine Schliessung über mehrere Dinge, einschließlich der index parameter übergeben in der #each iterator.

    Edit: tut mir Leid, ich merkte, ich machte eine massive Annahme, unten: Dass die cover_x Elemente sind, in der Tat, die Liste der Elemente unter review_list. Wenn Sie nicht sind, ignorieren Sie die unten und meine Entschuldigung! - T. J.

    So, das funktioniert, aber es ist auch unnötig Komplex. Ereignis-delegation könnte dein Freund hier: Suchen Sie für Klicks auf die Liste, sondern als Liste Elemente:

    Event.observe(window, 'load', function() {
    $('review_list').observe('click', function(event) {
        var li;
        li = event.findElement('li');
        if (li) {
            //...your code here to interact with the list item.
            //If you need the index, you can find it easily enough:
            //index = parseInt(li.id.substring(6));
            //...since your IDs on the LI items is "cover_x" with x
            //being the index.
        }
    });
});
    InformationsquelleAutor T.J. Crowder
  3. -1

    Versuchen Sie, ein var keyword der for-Schleife. Ohne var Sie bei der Zuordnung einer globalen variable i, die dann erhöht auf jeder loop-iteration. Also nach der Schleife noch den Wert 8 und Ihre alert bezieht sich auf diesen Wert.

    Event.observe(window, 'load', function() {
    for(var i = 1; i <= $$('ul#review_list li').length; i++) {
        $('cover_' + i).observe('click', function(event) {
                alert(i);
        });     
    }
});
    InformationsquelleAutor RaYell
Schreibe einen Kommentar