5

在下面的代码中，您将看到我正在尝试为 image.onclick 定义一个带有额外参数的事件处理程序，我在 while 循环中声明了这些参数，希望 javascript 以这种方式定义范围，但事实并非如此。基本上这里所有的事件处理程序都获得了我给变量 id 和 section_id 的最后一个值。关于如何处理我想要动态生成这些处理程序的情况的任何想法？

function handlePicturesResult(){
    if (req.readyState == 4) { // Complete
        if (req.status == 200) { // OK response

            var el = document.getElementById('pictureHolder');
            while( el.hasChildNodes() ){
                el.removeChild(el.lastChild);
            }

            var tempObject = JSON.parse(req.responseText);
            var pictures = tempObject.images;
            var i=0;

            while(i<pictures.length){

                var picIndex = i;

                var image= new Image(120,80);
                image.src = 'images/' + pictures[i].url;
                image.width = 120;
                image.height = 80;
                var id = pictures[picIndex].id;
                var section_id = pictures[picIndex].sectionId;
                image.onclick = function(event){
                    deleteImage(event,id,section_id);
                }


                var txtNode = document.createTextNode(pictures[picIndex.valueOf()].id); 
                el.appendChild(image);
                el.appendChild(txtNode);
                i++;
            }
        } else {
        alert("Problem: " + req.statusText);
        }
    }

}
4

3 回答 3

14

闭包解决了另一个问题！

image.onclick = function(id, section_id){
    return function(event) {
        deleteImage(event,id,section_id);
    }
}(id, section_id);

外部函数立即运行（注意最后带有参数的括号），并返回内部函数，该函数在其范围内保留变量的副本，就像它们在循环的迭代中一样。

JavaScript 按值传递非对象变量，因此通过将idand传递section_id给外部函数，您可以在该函数内创建它们的副本。当您创建并返回内部函数时，该内部函数将在其创建时处于范围内的所有变量保留在范围内（这是闭包id的核心），包括和的局部变量副本section_id。具有独特作用域的内部函数成为该元素的事件处理程序。

于 2012-06-01T19:59:22.560 回答
0

您需要使用闭包。 https://developer.mozilla.org/en/JavaScript/Guide/Closures

image.onclick = function(id, s_id){
  return function(event){
    deleteImage(event, id, s_id);
  }
}(id, section_id)

javascript 中的作用域可以在函数的花括号内定义，这就是为什么使用传递给它的参数执行外部函数将在循环中的特定时间保留这些变量的值，您需要它们。

没有它们， id 和 section_id 的值将始终引用它们在最后一次迭代中的值。

于 2012-06-01T20:01:59.807 回答
0

这是一个经典的 JavaScript 问题，源于对函数作用域缺乏了解。在这条线上：

deleteImage(event,id,section_id);

传递给的参数没有理由deleteImage保留它们在创建回调时的值。变量id和section_id绑定到handlePicturesResult; 它们是存在于该空间中的变量，并且每个变量都只有一个副本。因此，当回调运行时，它将使用那些特定的变量和它们当前引用的值（来自循环的最后一次迭代）。

解决方案是将变量放入一个范围，在循环的每次迭代中“保存”它们的值。函数提供了 JS 中唯一的此类范围。我不会重复已经提供的优秀解决方案。另一种方法是使用 jQueryeach进行迭代，这样您就不会再遇到这个问题了：

$.each(pictures, function(i, picture) {

    var image= new Image(120,80);
    var id = pictures.id;
    var section_id = picture.sectionId;
    var txtNode = document.createTextNode(id);

    image.width = 120;
    image.height = 80;
    image.src = 'images/' + picture.url;

    image.onclick = function(event){
        deleteImage(event, id, section_id);
    }

    el.appendChild(image);
    el.appendChild(txtNode);

});
  • 假设pictures是一个数组。
于 2012-06-01T20:15:38.753 回答