javascript - 在 Vanilla JS 中点击动态加载图像

Question

我正在尝试创建一个单击事件，该事件将根据单击的按钮加载特定图像。目前我的 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];