循环中的JS onclick事件

debugcn 发表于 Dev

短剑

我对JavaScript和onclick事件有疑问。我想从我在循环中创建的元素定义onclick事件。我的代码看起来像这样：

for (var i = 0; i < result.entries.length; i++) {
  var entry = result.entries[i];
  var adder = document.createElement('span');
  adder.innerHTML = '+';
  adder.onclick = function () {
    addFeed(entry.title, entry.url);
    backButton();
  };
  container.appendChild(adder);
}

问题是，此代码创建了这样的事件侦听器：

listenerBody: "function () {addFeed(entry.title, entry.url); backButton();}"

但是我需要entry.title和entry.url的值，例如：

listenerBody: "function () {addFeed('ABC', 'http://example.com'); backButton();}"

我希望有一个人可以帮助我。

fmsf

您只是碰到了JavaScript中的一种称为提升和闭合循环的事情。

发生的情况是您的循环继续进行，并且在触发onclick函数时，entry变量中的内容是的最后一个元素result.entries。

为了解决这个问题，您可以将其锁定在一个闭包中（示例）：

function setOnClickEvent(element, entryValue) {
  element.onclick = function () {
    addFeed(entryValue.title, entryValue.url);
    backButton();
  };
}

for (var i = 0; i < result.entries.length; i++) {
  var entry = result.entries[i];
  var adder = document.createElement('span');
  adder.innerHTML = '+';
  setOnClickEvent( adder, entry)
  container.appendChild(adder);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。