Question

考虑：

for (var i in somecollection){
   var a = document.createElement('a');
   a.onclick = new function(){callSomeMethod(somecollection[i]);};
   ...
}

在运行时，所有'a'元素最终调用具有相同参数值的callSomeMethod（'somecollection'中的最后一个元素。

我有一个解决方案如下：

for (var i in somecollection){
   var a = document.createElement('a');
   var X = 'callSomeMethod(\''+somecollection[i]+'\');';
   a.setAttribute('onclick', X);
   ...
}

但是当我缩小我的JS文件时，这迫使我从修改/压缩中排除'callSOmeMethod'。如何使用不同的参数创建每个'a'元素的单击处理程序callSomeMethod而不用字符串中的函数名称进行硬编码？

我找到的最接近的搜索是pass string parameter in an onclick function中接受的答案但我不知道如何创建“范围泡沫”。

...谢谢

Answer 1

您可以使用闭包，它将捕获i

的值

for (var i in somecollection){
    var a = document.createElement('a');
    a.onclick = (function(index) {
        return function () {
            callSomeMethod(someCollection[index])
        };
    })(i);
    ...
 }

这样，在调用函数时，index的正确值将可用，但在onClick事件触发之前不会调用它。

Answer 2

你可以使用javascript的力量！ juste将自定义属性添加到对象。

这是一个例子：

var somecollection= [ 'a','b','c','d'];

function callSomeMethod() {
     var i = this.__index; // retreive here your data
     if (i) {
        alert(somecollection[i]);
     }
}

function init() {

    for (var i in somecollection){
        var a = document.createElement('a');
        a.onclick = callSomeMethod;
        a.innerHTML = "click for #" + i;
        a.__index = i; // custom property to capture index or any data you want to pass
        document.body.appendChild(a);    
    }
}

Answer 3

下面有趣的方法。我还发现以下内容完全符合我的要求，所以我想在这里分享一下：

function attachSomeMethodClickHandler(a, value){
   function functionX(){callSomeMethod(value);};
   a.addEventListener('click', functionX);
}
 :
 :

for(var i in someCollection){
    var a = document.createElement('a');
    attachSomeMethodClickHandler(a, someCollection[i]);
    :
}

Answer 4

不要使用内联绑定，而是尝试使用事件委派：

将事件绑定到锚点父级，并在单击目标后检查目标

这样，您不仅限于创建的元素数量，

如果稍后再创建新事件，则不必再绑定事件。

然后传递锚点索引而不是参数。

var dataSource = ["dog", "cat", "horse"];
var container = document.getElementById("container");

function index(el) {
  var parent = el.parentNode;
  for(i = 0;i < parent.childNodes.length;i++) {
    if(parent.childNodes[i] == el) {
        return i;   
    }
  }
}

container.addEventListener("click", function (e) {
  e.preventDefault();
  var idx = index(e.target);
  alert("Index: " + idx + " value: " + dataSource[idx]);
});

for (i = 0; i < dataSource.length; i++) {
  var data = dataSource[i];
  var a = document.createElement("a");
  var text = document.createTextNode(data);
  a.href = "http://someurl.com?id=" + data;
  a.appendChild(text);
  container.appendChild(a);
}

这是小提琴：http://jsfiddle.net/RZw8e/2/

如何将不同的值传递给onclick处理程序

4 个答案: