如何通過單擊事件來更改圖像？

Question

我試過了，但是沒有用。 當我單擊.imgChangeBtn元素時，該元素的src值將在#imgDisplay元素上為#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

使用document.querySelector('.imgChangeBtn').setAttribute("src", imgPath); 為了設置src。

Answer 2

您需要像下面這樣。 您還可以在函數中引用“ this”，以縮短代碼長度。

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

ChangeBtn.onclick = function () {
   var imgPath = this.getAttribute('src');
   DisplayBoard.src = imgPath;
   console.log(imgPath);
};

Answer 3

您應該使用querySelectorAll imgChangeBtn類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> 

Answer 4

我為您認為要實現的目標創建了一個Codepen，需要jQuery： https ://codepen.io/MayhemBliz/pen/eerzdJ

 $("img").on("click", function() { var selectedImgSrc = $(this).attr("src"); console.log(selectedImgSrc); $("#img").attr("src",selectedImgSrc); }); 

 #img { display: block; object-fit: cover; width: 200px; height: 200px; margin-bottom: 10px; } ul { list-style: none; padding: 0; font-size: 0; } li { display: inline-block; } img { display: block; width: 100px; height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="img" src="https://media.giphy.com/media/xnscj78AnbBm/giphy.gif"/> <ul> <li><img src="https://media.giphy.com/media/dWOhtHvkWgRq0/giphy.gif"></li> <li><img src="https://media.giphy.com/media/xnscj78AnbBm/giphy.gif"></li> </ul>