Question

我将输入按钮附加到div并按以下方式向每个按钮添加onclick事件：

function initializeImages(imagesStr) 
{   
imagesArr = imagesStr.split(";");

imagesDiv = document.getElementById("buttons");

for (i=0 ; i<imagesArr.length ; i++)
{
    //Create button
    button = document.createElement('input');
    button.type = "button";
    button.className = "image_button";
    button.value = i+1;
    button.onclick = function(){showImage(imagesArr[i]);};

    //Append Button
    imagesDiv.appendChild(button);
}   
}

但参数imagesArr [i]作为未定义传递。

我尝试在传递之前将其保存到变量中：

var image = imagesArr[i];
button.onclick = function(){showImage(image);};

但是这样，函数接收对该静态变量的引用，并始终获取最后一个值。

有什么建议吗？

Answer 1

它是未定义的，因为直到调用点击回调才会评估i。到那时i超出了图像数组的长度。

尝试

button.onclick = (function (i) {
    return function () {
        showImage(imagesArr[i]);
    };
}(i));

Answer 2

如果你改变了怎么办：

button.onclick = function(){showImage(imagesArr[i]);};

到此：

button.onclick = showImage;

...

function showImage(el) {
    var index = parseInt(el.target.getAttribute('value'), 10);
    var image = imagesArr[index-1]

Answer 3

你服了吗？

<html>
<head>
<script>
var imgs= ['btn1','btn2','btn3'];
function AddImages(arr,dest){
    for(i in arr){
        document.getElementById(dest).innerHTML += '<input type="button" class="'+arr[i]+'" value="'+(parseInt(i)+1)+'" onclick="alert(\''+arr[i]+'\');"/>';
    }
}
</script>
<style>
.btn1 {
background-color:red;
}
.btn2 {
    background-color:green;
}
.btn3 {
    background-color:blue;
}
</style>
<body>
<div id="button"></div>
<a href="#test" onclick="AddImages(imgs,'button');">Add Images</a>
</body>
</html>

函数参数未按预期传递

3 个答案: