Question

我正在尝试创建一个on事件，该事件将基于被单击的按钮加载特定的图像。目前，我的html是：

  <nav>
    <a class="link" href="#">1</a>
    <a class="link" href="#">2</a>
    <a class="link" href="#">3</a>
    <a class="link" href="#">4</a>
    <a class="link" href="#">5</a>
    <a class="link" href="#">6</a>
    <a class="link" href="#">7</a>
    <a class="link" href="#">8</a>
    <a class="link" href="#">9</a>
    <a class="link" href="#">10</a>
    <a class="link" href="#">11</a>
  </nav>
  <div id="image"></div>

基于链接，我希望它们中的每一个都加载关联的图像：

var item = document.querySelectorAll(".link");
var itemID = [];

for (var x = 0; x < item.length; x++) {
    itemID[x] = x + 1;
  }
for (var i = 0; i < (item.length); i++) {
  img = itemID[i];
  item[i].addEventListener("click", function(){
    document.querySelector("#image").innerHTML = '<img src="' + img + '.png">';
  });
}

该代码可以正确加载图像，但是每个链接只能加载“ 11.png”。链接1应该加载1.png，链接2应该加载2.png，等等。

我不确定自己在做什么错，但我误会了如何正确使用addEventListener？任何帮助都将非常欢迎！

Answer 1

问题出在这里：img = itemID[I]; img没有声明，并且是全局的，因此在每次迭代中它都会更改值，因此旧标签img会相应地更改src。

尝试在每次迭代中声明一个新的img：

let img = itemID[i];

在Vanilla JS中点击动态加载图片

1 个答案: