Übergeben Sie kontextabhängige Variable an onclick-Ereignishandler als Argument

Question

* Dies geschieht innerhalb eines größeren Codeblocks in einer for-Schleife. Siehe Ende des Posts für die gesamte Schleife.

Ich habe alle Beiträge gelesen, die über dieses Thema zu sein scheinen, aber ich bin immer noch verloren.

Ich versuche, ein onclick-Ereignis zu einem Kontrollkästchen zuzuweisen. Die Funktion, die dem Ereignis onclick zugewiesen wird, muss Zugriff auf eine Variable haben, die in dem Bereich verfügbar ist, in dem das Kontrollkästchen definiert ist (idvariable).

var idvariable = parentChildList[i].children[j]["subjectid"]; 
var input = document.createElement("input"); 
input.type = "checkbox"; 
input.value = ""; 
input.onclick = function() { 
    return clicked(idvariable); 
}; 

function clicked(id) { 
    alert(id); 
}; 

Ich habe jede Variation von Inline- und benannte Funktionen versucht, aber ich kann nicht herausfinden, wie die angeklickt Funktion Zugang zu geben idvariable. In diesem Beispiel ist der Wert dieser Variablen nicht definiert.

Oder, wenn ich versuche, es mit dieser Art und Weise:

var input = document.createElement("input"); 
input.type = "checkbox"; 
input.value = ""; 

var idvariable = parentChildList[i].children[j]["subjectid"]; 
input.onclick = function (idvariable) { 
    return clicked(idvariable); 
}; 

function clicked(id) { 
    alert(id); 
}; 

ich eine Benachrichtigung erhalten, sagt [object Mouseevent]. Das Gleiche gilt für die folgenden, wo ich die() aus dem Methodennamen entfernt I des Onclick-Ereignis bin Zuordnung:

var idvariable = parentChildList[i].children[j]["subjectid"]; 
input.onclick = function() { 
    return clicked; 
}(idvariable); 

function clicked(id) { 
    return alert(id); 
}; 

* gesamte Schleife:

for (var i = 0; i < parentChildList.length; i++) { 
     var row = table1.insertRow(-1); 
     var cell = row.insertCell(0); 
     cell.innerHTML = 
      "<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse" + i + "\">" + parentChildList[i]["title"] + "</a></h4>"; 

     if (parentChildList[i].children.length > 0) { 
      var row2 = table1.insertRow(-1); 
      var cell2 = row2.insertCell(0); 

      var table2 = document.createElement("table"); 
      table2.className = "collapse"; 
      table2.id = "collapse" + i; 
      cell2.appendChild(table2); 

      for (var j = 0; j < parentChildList[i].children.length; j++) { 
       var row3 = table2.insertRow(-1); 
       var cell3 = row3.insertCell(0); 
       var div = document.createElement("div"); 
       div.className = "checkbox"; 

       var label = document.createElement("label"); 
       label.innerText = parentChildList[i].children[j]["title"]; 

       var input = document.createElement("input"); 
       input.type = "checkbox"; 
       input.value = ""; 
       input.setAttribute('subj', idvariable); 

       var idvariable = parentChildList[i].children[j]["subjectid"]; 
       alert(idvariable); 
       input.onclick = function() { 
        return clicked(this.getAttribute('subj')); 
       }; 

       function clicked(id) { 
        return alert(id); 
       }; 

       cell3.style.padding = "0px 0px 0px 10px"; 
       cell3.style.fontsize = "x-small"; 

       cell3.appendChild(div); 
       div.appendChild(label); 
       label.insertBefore(input, label.childNodes[0]); 
      } 
     } 
    } 

Answer 1

onclick Handler empfängt Event Objekt. Wenn ein Handler als elem.onclick=handler angefügt wird, ist das Element innerhalb des Handlers als this verfügbar. Das ist also eine Problemumgehung.

var idvariable = parentChildList[i].children[j]["subjectid"]; 
var input = document.createElement("input"); 
input.type = "checkbox"; 
input.value = ""; 
input.setAttribute('data-subj', idvariable); 
input.onclick = function() { 
    return clicked(this.getAttribute('data-subj')); 
}; 

function clicked(id) { 
    alert(id); 
}; 

Answer 2

Sie das Kontrollkästchen, um einige anhängen haben existierendes Element zuerst, mit dem folgenden Code.

var element = document.getElementById("one").appendChild(input); 

Dann können Sie die Eltern erhalten, indem etwa wie folgt mit ...

var x = document.getElementById("someId").parentElement; 

wo x das Mutterelement enthalten.

Dieser Link https://stackoverflow.com/a/9418326/886393 ist über benutzerdefinierte Daten in einem Ereignis (benutzerdefiniertes Ereignis). Ich hoffe, das hilft.

Dank

Paras