Динамически создаваемые кнопки, необходимо передать другое значение функции onlick в цикле foreach

Question

Что я делаю:

Я перебираю массив jsarray и создаю кнопки, которые будут кнопками удаления (одна кнопка создается для каждого элемента в массиве).Я увеличиваю переменную i в каждом цикле, которая будет значением индекса массива для этой кнопки.Например, вторая кнопка, созданная в цикле, должна получить значение 2, переданное в ее onclick параметры функции и т. Д.

Фон в коде:

jsarray содержитИдентификаторы твитов, которые позже будут включены в мою веб-страницу.Твиты встраиваются в цикл forEach, и я хочу создать кнопки в том же цикле.

Кнопки * onclick вызывают функцию deleteTweet (), которая принимает индекс jsarray,так что следующий цикл для вставки не будет содержать удаленный твит.

Вот моя 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

Я полагаю, это связано с проблемой закрытия .Вам не нужно создавать свой собственный индексатор (т.е. 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);