单击时如何更改图像？

I have the following icons where i want to change each of it when it is clicked And change the image to its original after another image is clicked. how do i do it with jQuery?

我有以下图标，我想在单击时更改每个图标并在单击另一个图像后将图像更改为原始图像。我如何用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>

I only code the jquery this far.. and I am stuck. please help..

我到目前为止只对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);
        }
    });

2 个解决方案

#1

change your code like below:-

改变你的代码如下： -

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

Working example:-

工作范例： -

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

#2

You Button click has not been close seems like some syntax error overall code is working fine please find below snippet fore more info.

你按钮点击没有关闭似乎有些语法错误整体代码工作正常请找到下面的代码片段更多信息。

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

#1