Question

您好我正在尝试为我的项目创建一个简单的颜色选择器。它应该消除DIV与彩色SPANS的关系，每个跨度都应该点击调用我的函数-pickColor（） - 以及它的onwn值。

问题在于，在点击任何Span后，我的函数只是从我的数组中调用最后一个walue而不是相应的。知道怎么纠正吗？

这是我的代码

var colors = [ "303030", "777777", "da0025", "f01800", "ff4300", "fd6c05", "feab07", "ffc91e", "93c900", "54c300", "00ab62", "00c3c4", "009bf0", "006afe", "3f00dd", "9025ff", "ff3ec2", "fe0b6b"];

//颜色选择器变量选择器;

function createPicker(){
//create picker wrapper
picker = document.createElement('div');
picker.id = "colorPicker";
picker.style.display = "none"; // initialy invisible !
picker.style.margin = "0";
picker.style.padding = "0.5em";
picker.style.backgroundColor = "rgb(30,30,30)";
//create picker color options
var newColor;
for (var i = colors.length - 1; i >= 0; i--) {
    newColor = document.createElement('span');
    newColor.id = colors[i];
    //set style for color option
    newColor.style.display = "inline-block";
    newColor.style.width = "50px";
    newColor.style.height = "50px";
    newColor.style.margin = "0";
    newColor.style.padding = "0";
    newColor.style.backgroundColor = "#"+colors[i];
    //add onclick function

    newColor.addEventListener("click", function f(){pickColor( colors[i] )}, true);

    //append option
    picker.appendChild(newColor);
};
//append colorPicker to file
document.getElementById('here').appendChild(picker); // value must be set to the parent elements id !
}

function displayPicker(){
picker.style.display = "inline-block";
}

function pickColor(id){
//set value
console.log(id);
var input = document.getElementById('color'); // must be the 'input' elements id that we want to set !
//console.log(input);
input.value = id;
// hide picker
picker.style.display = "none";
}

Answer 1

封闭很好但有时候有点令人困惑。这里有Fiddle问题（我希望）已经解决了，而且这里的js代码可以实现：

newColor.addEventListener("click", (function (param) {
            return function() {
                pickColor(colors[param]);
            };
        })(i), true);

问题在于，由于关闭，我的值为-1。哟必须将i的实际值传递给函数，并且由于结束，在函数中使用它，你最终将返回并用于事件。

<强>更新

更好的方法：在代码中的某处定义函数：

function clickEvHandlerClosure(param) {
    return function () {
        pickColor(colors[param]);
    };
}

然后：

newColor.addEventListener("click", clickEvHandlerClosure(i), true);

fiddle

希望它有所帮助。

Answer 2

在查看了Teemu的推荐链接（感谢）后，我意识到如果在循环内的function方法调用中使用addEventListener，则会非常棘手。

那么如何以这种方式，没有任何参数：

newColor.addEventListener("click", pickColor, true);

在pickColor函数中，您可以通过以下方式访问id：

function pickColor(){

   var id = this.id;
   //more code below

}

js onclick为新创建的元素

2 个答案: