javascript更改img onclick根據被點擊的img

我試圖在按下img時使用onclick函數。我想根據被按下的小img改變大和主img（「mainPants」）。我的代碼存在問題 - 小img上的每次「單擊」都將主img更改爲最後一個（紅褲子）。javascript更改img onclick根據被點擊的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>

來源

2016-02-13 user3488862

'onclick'是屬性。使用'addEventListener（）'你必須使用'click'（不帶'''''''''）事件的名稱，''.addEventListener（'click'，...' – Andreas

仍然不能正常工作...' – user3488862

'。 .. onclick = changeImage（this）...'+'function changeImage（img）{document.getElementById（「mainPants」）。src = img.src;}' – Andreas

您的每次點擊運行所有回調：

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>

來源

2016-02-13 13:46:54

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

來源

2016-02-13 13:56:30 user3488862

javascript更改img onclick根據被點擊的img

回答

相關問題