动态创建的按钮，需要将不同的值传递给foreach循环中的onlick函数

Question

我在做什么：

我正在遍历数组jsarray并创建将成为删除按钮的按钮（为该数组中的每个元素创建一个按钮）。我在每个循环中增加一个变量i，该变量将是该按钮的数组索引的值。例如，在循环中创建的第二个按钮应将值2传递到其onclick函数参数中，依此类推。

代码背景：

jsarray包含Tweets的ID，这些ID稍后将嵌入到我的网页中。这些推文被嵌入到forEach循环中，我想在同一循环中创建按钮。

按钮的onclick调用一个带有jsarray索引的deleteTweet（）函数，以便要嵌入的下一个循环不会在其中包含已删除的tweet。

这是我的deleteTweet()函数：

          function deleteTweet(x)
          {
            console.log("deleteTweet was called"+x)
            var index = jsarray.indexOf(x);
            jsarray.splice(index, 1);
            console.log(jsarray[x] + "was deleted");
            return jsarray;
          }

这是嵌入推文并创建删除按钮的功能：

          function embedTweets()
          {
            console.log("the embed tweets function has been called.")
            var i = 0;
            var docFrag = document.createDocumentFragment();
            jsarray.forEach(function(id)
            {

              twttr.widgets.createTweet(
                id, document.getElementById('container'),
                {
                  conversation : 'none',    // or all
                  cards        : 'hidden',  // or visible
                  linkColor    : '#' + background_color, // default is blue
                  theme        : 'light',    // or dark
                  align        : 'center'
                }
              );
              var delButton = document.createElement('button');
              docFrag.appendChild(delButton);
              delButton.innerHTML = "DELETE TWEET"+i;
              delButton.onclick = function(){
                deleteTweet(i);
              }
              i++;
            });
            document.body.appendChild(docFrag);
          }

我的问题：

对于在此循环中创建的所有按钮，它们均在单击操作时将索引50传递给deleteTweets函数。我知道这种情况的发生是因为定义通过了i，并且定义完成后等于50。

如何在当前循环中为每个按钮赋予参数值i。与之类似，按钮：“ DELETE TWEET9”实际上将值9传递给了deleteTweet()而不是总是数组中的最后一项。

简体：

array = ['1', '2', '3', '4']

    var i = 0;
    docFrag = document.createDocumentFragment();

    array.forEach(function(id)
    {
      var delButton = document.createElement('button');
      docFrag.appendChild(delButton);
      delButton.innerHTML = "DELETE TWEET" + i

      //This is the problem area:
      delButton.onlick = function(){
        deleteTweet(i);
      }
      i++;
    });
    document.body.appendChild(docFrag);

重申一下，我在此循环中创建的所有按钮都执行deleteTweet(*max of array*)，我希望它成为循环时i的值。 >

Answer 1

我相信这是由于closure问题引起的。您无需创建自己的索引器（即var i）。您可以改为将第二个变量传递给forEach，该变量将是每次迭代时数组的索引（请参见forEach）。尝试以下方法：

array = ['1', '2', '3', '4']

docFrag = document.createDocumentFragment();

array.forEach(function(id, i)
{
  var delButton = document.createElement('button');
  docFrag.appendChild(delButton);
  delButton.innerHTML = "DELETE TWEET" + i

  //This is the problem area:
  delButton.onlick = function(){
    deleteTweet(i);
  }
});
document.body.appendChild(docFrag);