javascript - 动态生成的 Select-Elements 和 JavaScript 闭包

Question

我想生成一些<select动态元素。我正在复制现有的一个，仅更改名称和 onchange-Event。这就是我的问题所在:每个 <select>有自己的ID。当 onChange-Event 触发时，它应该响应元素的值和 ID。我不知道如何准确定义 JavaScript 闭包。我用“this.value”尝试过，但显然这不起作用...... 我已经找到this例如，但它对我来说根本不起作用:/

JavaScript:

var i = 0;
var selectArray = [];

function addSelector(){

var container = document.getElementById("check0");

selectArray[i] = document.getElementsByName("select0")[0].cloneNode(true);
selectArray[i].name = 'select'+i;
selectArray[i].onchange = function(v, i) {
        return function() {
           changeType(v, i)
        }
    }(this.value, i);

container.appendChild(selectArray[i]);
}

function changeType(selected, i) {
    switch (selected) {
        case 'One':
           alert(selected+' , '+i);
            break;
        case 'Two':
            alert(selected+' , '+i);
            break;          
        case 'Three':
            alert(selected+' , '+i);
            break;
        case 'Four':
            alert(selected+' , '+i);
            break;
        case 'Five':
            alert(selected+' , '+i);
            break;
    }
}

(我也尝试发布 HTML，但由于某种原因我无法做到这一点；))

Here is the fiddle

Answer 1

this.value这里不知道:

function addSelector(){
    /* ... */
    selectArray[i].onchange = (function(v, i) {
        return function() {
            changeType(v, i)
        }
    })(this.value, i);
    /* ... */
}

this将是undefined (严格模式)或window (正常模式)。 JavaScript 应该如何知道 this是对创建/克隆的 <select> 的引用目的？ this在您的 onchange 中将是正确的，因此您不必通过闭包包含此内容，只需包含索引 i必须包括:

selectArray[i].onchange = (function(index) {
    return function() {
        changeType(this.value, index)
    }
})(i);

请注意，您的警报语法是错误的 - 您应该使用 alert(selected + " " + i)相反，因为第二个参数将被忽略。

另请参阅:

• JSFiddle Demo
• MDN: this