在 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];