Question

我有这段代码：

document.getElementById('img'+i).onclick = function(){popup_show('popup',array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict, 'AddEditSchedule;;popup_drag2;;EditSched;;'+String(array_msg_id[3])+';;view', 'popup_drag', 'popup_exit', 'screen-center', 0, 0);};

...但是当我点击图像时，array_msg[i]的数据是循环的最后一个数据，这意味着索引是循环的长度。我使用IE进行此操作。

请告诉我如何做到这一点。在FF中，它工作正常，因为我使用setAttribute。

@bobince

document.getElementById('img'+i).onclick= popup_show.bind(window, 'popup',array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict,'AddEditSchedule;;popup_drag2;;EditSched;;'+array_msg_id[3]+';;view','popup_drag', 'popup_exit', 'screen-center', 0, 0    ); 
                if (!('bind' in Function.prototype)) {
                    Function.prototype.bind= function(owner) {
                        var that= this;
                        var args= Array.prototype.slice.call(arguments, 1);
                        return function() {
                            return that.apply(owner,
                                args.length===0? arguments : arguments.length===0? args :
                                args.concat(Array.prototype.slice.call(arguments, 0))
                            );
                        };
                    };
                }

Answer 1

您需要使用closure。如果您提供循环代码以及在循环中执行的代码会有所帮助，但假设您有一个标准for循环遍历数组，则以下代码应该有效：

for (var i = 0, l = array.length; i < l; i++)
{
    (function(i) {
        document.getElementById("img" + i).addEventListener("click", function() {
            popup_show("popup", array_msg[i] + "|||" + date("Y-m-d", strtotime(lec_date)) + "-==-" + str_view_forConflict, "AddEditSchedule;;popup_drag2;;EditSched;;" + String(array_msg_id[3]) + ";;view", "popup_drag", "popup_exit", "screen-center", 0, 0);
        }, false);
    })(i);
}

此外，您不应该在Firefox中使用setAttribute。相反，使用element.onclick或者最好使用element.addEventListener，它允许您在事件触发时添加要调用的多个函数，因此可以很好地与其他代码一起使用（如果两位代码分配了一个函数）比方说，element.onclick = function() { ...形式的点击事件，然后第二个任务覆盖第一个 - 不好的）。我在上面的代码示例中使用了element.addEventListener。

Answer 2

你遇到了循环变量闭包问题。这是带有闭包的C风格语言中非常常见的问题，例如JavaScript和Python。有关在第二个闭包中绑定循环变量的解决方案，请参阅this question的已接受答案。

稍微不那么嵌套的解决方案是使用function.bind()：

for (var i= 0; i<something.length; i++) {
    document.getElementById('img'+i).onclick= popup_show.bind(window, 'popup',
        array_msg[i]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict,
        'AddEditSchedule;;popup_drag2;;EditSched;;'+array_msg_id[3]+';;view',
        'popup_drag', 'popup_exit', 'screen-center', 0, 0
    );
}

但是，由于此方法是大多数浏览器不支持的ECMAScript第五版功能，但它需要一些帮助 - 请参阅this answer的底部以实现向后兼容的实现。

Answer 3

Treby，这是你的答案的清理版本。您添加的其他匿名匿名函数不是必需的。

for (var i = 0, l = array.length; i < l; i++ ) {
  document.getElementById(i + '05').onclick = (function(tmp) {
    return function() { 
      popup_show(
        "popup", 
        array_msg[tmp] + '|||' + date('Y-m-d', strtotime(lec_date)) + '-==-' + str_view_forConflict, 
        "AddEditSchedule;;popup_drag2;;EditSched;;" + String(array_msg_id[3]) + ";;view", 
        "popup_drag", "popup_exit", "screen-center", 0, 0
      );
    };
  })(i);
}

编辑修复关闭问题

Answer 4

闭包。您需要使用JavaScript闭包。查看this question的答案是否有帮助。

Answer 5

工作答案：

var closures = [];
for (var i = 0; i < array.length; i++){
  closures[i] = (function(tmp) {
        return function() {
        document.getElementById(tmp + '05').onclick = function(){popup_show("popup", array_msg[tmp]+'|||'+date('Y-m-d',strtotime(lec_date))+'-==-'+str_view_forConflict, "AddEditSchedule;;popup_drag2;;EditSched;;"+ String(array_msg_id[3]) +";;view", "popup_drag", "popup_exit", "screen-center", 0, 0)};
        };
})(i);

  closures[i]();
}

感谢Steve Harrison答案。我知道要把它包裹起来

使用JavaScript中的动态参数动态onclick函数赋值？

5 个答案: