Rekursive Funktionen und removeEventListener

Ich möchte einen dynamischen Button Creator schreiben. So habe ich die html DateiRekursive Funktionen und removeEventListener

<body> 
    <button id="0" type="button" onclick="create_button(0)">Create button 1</button> 
</body>

und js Datei, die richtige Aktion "simuliert"

var counter = 0; 

function create_button(n) { 

    /*Shift up*/ 
    for (i=counter; i>n; i--) { 
     document.getElementById(i).id = i+1; 
     document.getElementById(i+1).innerHTML = i+1; 
    }; 

    /*Create new button*/ 
    var new_button = document.createElement("Button"); 
    new_button.innerHTML = n+1; 
    new_button.type = "button"; 
    new_button.id = n+1; 
    function helper() { 
     create_button(n+1); 
    }; 
    new_button.addEventListener('click', helper); 

    document.body.insertBefore(new_button,document.getElementById(n).nextSibling); 

    counter++; 
};

jedoch /*Shift up*/ Teil ändert sich nur id und innerHTML der Tasten nicht die Wirkung von click. Also, um zu beheben, dass ich in /*Shift up*/ zwei Zeilen hinzufügen müssen, die funktionieren sollte als

document.getElementById(i+1).addEventListener('click', helper(i+1)); 
document.getElementById(i+1).removeEventListener('click', helper(i));

Offensichtlich wird es nicht funktionieren. Aufgrund der rekursiven Art der create_button Funktion stelle ich mir vor, dass helper außerhalb von create_button verschoben werden sollte. Aber ich habe keine Ahnung, wie es geht.

Einige zusätzliche Informationen Ich vereinfachte den Code, aber in der Praxis Tasten haben einige Additionsfunktionen, die auf n abhängen. Sagen wir, dass wir auch die Position des Knopfes warnen wollen. So ändern wir Helper zu

function helper() { 
    create_button(n+1); 
    alert(n+1); 
};

Siehe in https://jsfiddle.net/o3Lsttyq/3/, was Warnungen sagen. Klicken Sie zum Beispiel auf 1,1,3.

Quelle

2016-04-15 Fallen Apart

versuchen Sie, die Tasten zu zeigen, in nach hinten, um zu bekommen? (z. B. 5, 4, 3, 2, 1 statt 1, 2, 3, 4, 5) – helllomatt

Hier ist Ihr Beispiel in einer Geige mit EventListener später angebracht. Was ist nicht richtig? https://jsfiddle.net/o3Lsttyq/ – jmargolisvt

@helllomatt Nr. 1,2,3 ... Zähler Schaltflächen haben. Ich drücke die Taste n. Alles von n + 1. Zähler wird nach n + 2 verschoben. Zähler + 1 und ich erstelle neue Taste n + 1. Ist mit meinem Code etwas nicht in Ordnung? –

Da Sie Einstellung id so dass es passt immer den aktuellen Index und Ihre Funktion helper will das gleiche Index, es alles, was Sie Ihre helper Funktion aus und ändern Sie es so etwas wie tun müssen, scheint sich bewegen:

function helper(){ 
    var n1 = this.id; // effectively "n+1" 
    alert(n1); 
}

Sie müssen create_button nicht mit diesem Argument aufrufen, da die gewünschten Daten aus this abgerufen werden können.

(Außerdem sollten Sie nicht verwenden das id Attribut für diese Art der Sache. Sie sollten stattdessen data- Präfix Attribute verwenden als here beschrieben. Wie gut, Refactoring um this anstelle der Verwendung getElementById() bedeutet, dass Sie die fallen könnte müssen für das Element des Index-Tracking)

Refactoring for fun.

<body> 
    <button type="button">Create button 1</button> 
</body>

function create_button(){ 
    var index = (this.innerHTML|0) + 1; 
    var new_button = document.createElement("button"); 
    new_button.type = "button"; 
    new_button.addEventListener('click',create_button); 
    document.body.insertBefore(new_button,this.nextSibling); 

    var target = new_button; 
    while(target) { 
    target.innerHtml = index; 
    target = target.nextSibling; 
    index += 1; 
    } 
} 
document.body.getElementsByTagName("button")[0].addEventListener('click',create_button);

Quelle

2016-04-15 21:43:02 Ouroborus

Es funktioniert perfekt. Dieses Problem hat mich für eine Weile wirklich gestört.'das' ist was ich wollte. Thx –

Großartig! Ich werde meine auch neu gestalten. Ich fühle, dass mein Code zu komplex ist. –

Was '| 0' tut' (this.innerHTML | 0) '? Ist '0' gesetzt, wenn 'this.innerHTML' nicht definiert ist? –

Rekursive Funktionen und removeEventListener

Antwort

Verwandte Themen