Question

我是JavaScript新手，我正在创建一个简单的应用程序来完成以下任务：

在数组中存储对象
使用for循环
单击相应列表项时对数组中存储的颜色的背景更改

我完成了＃1和2，但遇到了问题3.我在下面查看了the answer here寻求帮助，但它没有帮助解决问题。

1.Userinfo(to store user info)
2.User Instruction

Answer 1

这是因为你需要使用闭包。使用提供的闭包更新for循环部分。

// function creating un-ordered list
// it works!

function makeUL(songTitle) {
  var list = document.createElement('ul');
  for (var i = 0; i < songTitle.length; i++) {
    var track = songTitle[i];
    var trackName = track.name;
    var node = document.createElement("li");
    node.appendChild(document.createTextNode(trackName));
    list.appendChild(node);
  }
  return list;
}
document.getElementById('song-list').appendChild(makeUL(songTitle));

// here i call the list by tag name
var listItems = document.getElementById('song-list').getElementsByTagName('li');

// here's where it gets tricky
// the click works, but it always selects the last background-image in the array
for (var i = 0; i < listItems.length; i++) {
  (function (i) {
    listItems[i].addEventListener("click", function changeBackground() {
      document.body.style.background = "url(" + songTitle[i].background + ") no-repeat center center fixed";
      document.body.style.backgroundSize = "cover";
    });
  })(i);
}

发生这种情况的原因是，每次循环运行时，i都会递增，但请记住，在您单击之前不会执行eventListener。只有在您点击时才会转换i或使用情况。当您最终执行所有操作时，i将处于length + 1值。

但是在闭包的情况下，内部i与外部i完全分开。该值将保存并在封闭环境中发送，i值保持不变。这意味着，事件处理程序中使用的i与i循环的for不同。

如何在点击时循环一组背景图像

1 个答案: