JavaScript 根据单击的 IMG 更改 IMG

javascript change img onclick according to an img that was clicked

本文关键字：IMG 更改 单击 JavaScript      更新时间：2023-09-26

我正在尝试在按下 img 时使用 onclick 函数。我想根据按下的小 img 更改一个大的和主要的 img（"mainPants"）。我的代码存在问题 - 每次"点击"小 img 都会将主 img 更改为最后一个（红裤子）。

这是我的代码：

<img  id="mainPants" src="images/bluePants.png">
<img class="img1" id="pBlack"  onclick="changeImage()" src="images/blackPants.png">
<img  class="img1" id="pPink" onclick="changeImage()" src="images/pinkPants.png">
<img class="img1" id="pRed" onclick="changeImage()" src="images/redPants.png">
        <script>
            function changeImage(){
                var blackPants = document.getElementById("pBlack");
                var pinkPants = document.getElementById("pPink");
                var redPants = document.getElementById("pRed");
                var newImg = document.getElementById('mainPants');
                    blackPants.addEventListener('onclick', function(){
                        newImg.src = "images/blackPantsBig.png";
                    }());
                    pinkPants.addEventListener('onclick', function(){
                        newImg.src = "images/pinkPantsBig.png";
                    }());
                    redPants.addEventListener('onclick', function(){
                        newImg.src = "images/redPantsBig.png";
                    }());

            };
        </script>

每次点击都会运行所有回调：

blackPants.addEventListener('onclick', function(){
    newImg.src = "images/blackPantsBig.png";
}()); // these "()" brackets run function right after it is created

您还会将所有回调绑定两次 - 第一次在 HTML 中使用 onclick="changeImage()" 属性，第二次使用 addEventListener 。试试：

<script>
  function changeImage(e) {
    var newImg = document.getElementById('mainPants');
    switch (e.target.id) {
      case 'pBlack':
        newImg.src = "images/blackPantsBig.png";
        break;
      case 'pPink':
        newImg.src = "images/pinkPantsBig.png";
        break;
      case 'pRed':
      default:
        newImg.src = "images/pinkPantsBig.png";
    }
  }
</script>

<img class="img1" id="pBlack"  onclick="changeImage(this)" src="images/blackPants.png">
<img  class="img1" id="pPink" onclick="changeImage(this)" src="images/pinkPants.png">
<img class="img1" id="pRed" onclick="changeImage(this)" src="images/redPants.png">
    <script>
      function changeImage(img) {
        var newImg = document.getElementById('mainPants');
        switch (img.id) {
          case 'pBlack':
            newImg.src = "images/blackPantsBig.png";
            break;
          case 'pPink':
            newImg.src = "images/pinkPantsBig.png";
            break;
          case 'pRed':
          default:
            newImg.src = "images/redPantsBig.png";
        }
      }
    </script>
相关文章：