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

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

Answer 2

你需要像下面这样做。你也可以参考这个＆＃39;在函数中，使代码更短。

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

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

希望这有帮助。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 4

我为你想要实现的目标创建了一个codepen，需要jQuery：https://codepen.io/MayhemBliz/pen/eerzdJ

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

4 个答案: