javascript - 如何通过点击事件来改变图像？

Question

我尝试过，但没有成功。当我单击 .imgChangeBtn 元素时，该元素的 src 值将位于 #imgDisplay 元素上。注意 imgPath 变量没有获取任何值。并且该元素上未设置匿名功能。我不知道为什么!

<img id="imgDisplay" src="default.jpg"/>
<ul>
    <li><img class="imgChangeBtn" src="wolverine.jpg"></li>
    <li><img class="imgChangeBtn" src="Iron_man.jpg"></li>
</ul>

<script>
    var DisplayBoard = document.querySelector("#imgDisplay");
    var ChangeBtn = document.querySelector(".imgChangeBtn");

    ChangeBtn.click(function () {
         var imgPath = document.querySelector('.imgChangeBtn').getAttribute('src');
         DisplayBoard.src = imgPath;

         console.log(imgPath);
   })
</script>

Answer 1

您应该使用 querySelectorAll 循环遍历类 imgChangeBtn 的所有元素，然后在每次迭代中使用 addEventListener 附加点击监听器，检查下面的片段。

希望这有帮助。

var displayBoard = document.querySelector("#imgDisplay");
var changeBtnList = document.querySelectorAll(".imgChangeBtn");

for (var i = 0; i < changeBtnList.length; i++) {
  changeBtnList[i].addEventListener('click', changeSrc);
}


function changeSrc() {
  var imgPath = this.getAttribute('src');

  displayBoard.src = imgPath;

  console.log(displayBoard.src);
}

<img id="imgDisplay" src="default.jpg" />

<ul>
  <li><img class="imgChangeBtn" src="wolverine.jpg" alt="wolverine.jpg" /></li>
  <li><img class="imgChangeBtn" src="Iron_man.jpg" alt="Iron_man.jpg" /></li>
</ul>