在JavaScript中使用動態參數進行動態onclick函數分配？

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

您需要使用閉包 。 如果您所提供的循環代碼以及被循環中執行的代碼會有所幫助，但假設你有一個標准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 ，它允許您添加事件觸發時要調用的多個函數，因此可以與其他代碼很好地配合使用（如果代碼的兩位將一個函數分配給一個click事件的形式為element.onclick = function() { ... ，那么第二個分配將覆蓋第一個分配-不好）。 我在上面的代碼示例中使用了element.addEventListener 。

Answer 2

您遇到了循環變量關閉問題。 這是帶有閉包的C風格語言（例如JavaScript和Python）中非常常見的陷阱。 見接受的答案這個問題涉及在第二封塞結合的循環變量的解決方案。

嵌套稍微少一點的解決方案是使用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 Fifth Edition功能，因此它需要一點幫助-請參閱此答案的底部以獲取向后兼容的實現。

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閉包。 查看此問題的答案是否有幫助。

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 Answer。 我有個好主意