将上下文变量作为参数传递给 onclick 事件处理程序

Question

*这发生在一个更大的代码块中，在一个 for 循环中。请参阅整个循环的 post 结尾。

我已经阅读了所有似乎与这个主题有关的 post，但我仍然迷路了。

我正在尝试将 onclick 事件分配给复选框。分配给 onclick 事件的函数需要能够访问在定义复选框的范围内可用的变量 (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); 
};

我已经尝试了内联函数和命名函数的所有变体，但我无法弄清楚如何为单击的函数提供对 idvariable 的访问权限。在上面的这个例子中，那个变量的值是未定义的。

或者，如果我用这种方式尝试：

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

我收到一条提示 [object MouseEvent]。与以下相同，我从分配给 onclick 事件的方法名称中删除了 ()：

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

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

*整个循环：

    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

您必须首先使用以下代码将复选框附加到某个现有元素。

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

然后你可以通过使用类似下面的东西来获取父...

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

其中 x 将包含父元素。

这个link是关于一个事件（custom event）中的自定义数据。希望对您有所帮助。

谢谢

第

Answer 2

onclick 处理程序收到 Event 对象。如果作为 elem.onclick=handler 附加的处理程序，则该元素在处理程序中可用作为 this。所以这是解决方法。

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

将上下文变量作为参数传递给 onclick 事件处理程序

Pass contextual variable to onclick event handler as argument

javascript

onclick

dom-events