Question

我想创建div列表，其中一个div应该是这样的：

<div onclick="myFunc(this, 'arrayValue')"></div>

我希望通过迭代我的数组并将索引值传递给我的函数来实现它。其中一个有效的解决方案是使用setAttribute：

  for(var i = 0; i < array.length; i++){
    var div = document.createElement("div");
    div.setAttribute("onclick", 'myFunc(this, \''+array[i]+'\')');
    myDiv.appendChild(div);
  }

唯一的问题是这部分看起来很丑陋：\''+array[i]+'\')' 有没有其他方法来实现这一目标？这看起来像这样或类似的东西：

    div.setAttribute("onclick", myFunc(this, array[i]);

顺便说一句。其他解决方案：当我使用div.onclick时onclick attr在div上不可见（结果：<div></div>），可能我做错了。

Answer 1

var array = ['bla1','bla2'];

var myFunc = function(value) {
  alert('click : '+ value);
};

var myDiv = document.getElementById('myDiv');

for(var i = 0; i < array.length; i++){
    var div = document.createElement("div");
    div.className = 'bla';
    myDiv.appendChild(div);
  
  div.addEventListener('click', myFunc.bind(this, array[i]));
}

.bla {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  margin: 10px;
  }

<div id="myDiv"></div>

你想要的吗？

添加onclick事件以动态创建元素

1 个答案: