如何在點擊圖片時更改圖片？

Question

我有以下圖標，我想單擊時更改它們中的每一個，並在單擊另一圖像後將圖像更改爲原始圖像。我如何使用jQuery來做到這一點？

<ul> 
    <li><a class="button" id="mobile-icon" href="#"><img src="images/mobile-icon.png" class="defaultimg"></a><h4>Mobile</h4></li> 
    <li><a class="button" id="music-icon" href="#" ><img src="images/music-icon.png" class="defaultimg"></a><h4>Music</h4></li> 
    <li><a class="button" id="camera-icon" href="#" ><img src="images/camera-icon.png" class="defaultimg"></a><h4>Camera</h4></li> 
    <li><a class="button" id="computers-icon" href="#" ><img src="images/computers-icon.png" class="defaultimg"></a><h4>Computers</h4></li> 
</ul> 

我只編寫jquery到這個目標..我被卡住了。請幫助..

$(document).ready(function() { 
    $('.button').click(function(){ 
     $('.clicked').removeClass("clicked") 
     $(this).addClass("clicked") 
     if ($(".button").hasClass("clicked")) { 
      var id = $(this).find('img'); 
      var idToSRC = 'images/'+ this.id + '_hover' +'.png'; 
      id.attr('src', idToSRC); 
     }else if($(".button").not("clicked")){ 
      id.removeAttr('src', idToSRC); 
     } 
    }); 

Answer 1

改變你的代碼如下圖所示： -

$(document).ready(function() { 
    $('.button').click(function(){ 
     var myid = $(this); 
     $('.clicked').removeClass("clicked") 
     myid.addClass("clicked") 
     var idToSRC = 'images/'+ this.id + '_hover' +'.png'; 
     myid.find('img').attr('src', idToSRC); 
     $('.button').not(myid).each(function(){ 
     $(this).find('img').attr('src', 'images/'+ this.id +'.png'); 
     }); 
    }); 
});//missed 

工作例如： -

$(document).ready(function() {// when document is ready 
 
    $('.button').click(function(){ // when i click on a link 
 
     var myid = $(this); // create an object variable 
 
     $('.clicked').removeClass("clicked") //remove clicked class from all links 
 
     myid.addClass("clicked") //add clicked class to current clicked link 
 
     var idToSRC = 'images/'+ this.id + '_hover' +'.png'; //create new image path 
 
     myid.find('img').attr('src', idToSRC); // change image path of current clicked link 
 
     $('.button').not(myid).each(function(){ //for each other links except the current clicked link (not(myid) is doing that job to leave current clicked link) 
 
     $(this).find('img').attr('src', 'images/'+ this.id +'.png'); //change images to orignal-one 
 
     }); 
 
    }); 
 
});// you missed this in your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a class="button" id="mobile-icon" href="#"><img src="images/mobile-icon.png" class="defaultimg"></a><h4>Mobile</h4></li> 
 
    <li><a class="button" id="music-icon" href="#" ><img src="images/music-icon.png" class="defaultimg"></a><h4>Music</h4></li> 
 
    <li><a class="button" id="camera-icon" href="#" ><img src="images/camera-icon.png" class="defaultimg"></a><h4>Camera</h4></li> 
 
    <li><a class="button" id="computers-icon" href="#" ><img src="images/computers-icon.png" class="defaultimg"></a><h4>Computers</h4></li> 
 
</ul>

Answer 2

您按鈕click一直沒有接近好像有些語法錯誤代碼的總體工作正常，請在下面找到片斷脫穎而出的詳細信息。

$(document).ready(function() { 
 
$('.button').click(function(){ 
 
     $('.clicked').removeClass("clicked") 
 
     $(this).addClass("clicked") 
 
     if ($(".button").hasClass("clicked")) 
 
     { 
 
      var id = $(this).find('img'); 
 
      //var idToSRC = 'images/'+ this.id + '_hover' +'.png'; 
 
      var idToSRC = 'https://dummyimage.com/100x100/'; 
 
      id.attr('src', idToSRC); 
 
     } 
 
     else if($(".button").not("clicked")) 
 
     { 
 
     id.removeAttr('src', idToSRC); 
 
     } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a class="button" id="mobile-icon" href="#"><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Mobile</h4></li> 
 
    <li><a class="button" id="music-icon" href="#" ><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Music</h4></li> 
 
    <li><a class="button" id="camera-icon" href="#" ><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Camera</h4></li> 
 
    <li><a class="button" id="computers-icon" href="#" ><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Computers</h4></li> 
 
</ul>