每當有人點擊圖像時更改圖像src

Question

所以我在我的網站上有一個圖像。每當我點擊它，我希望它改變到另一個圖像。我現在有這個工作。但是當我點擊更改後的圖像時，我希望它更改回第一個圖像。

這是我現在的代碼：

$("#images2").attr("src", "http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg") 

Answer 1

使用此代碼：

jQuery(function($) { 
    $('#images2').on('click', function() { 
     var src = $(this).attr('src'); 
     if(src = 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg') 
      $(this).attr('src', 'orginalimage.jpg'); 
     else 
      $(this).attr('src', 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg'); 
    }); 
}); 

這個高度上點擊圖像上的事件。它檢查它的src並根據它進行更新。

Answer 2

請檢查此琴

https://jsfiddle.net/1bhf1e1o/

$('#rotate_images').on({ 
    'click': function() { 
     var origsrc = $(this).attr('src'); 
     var src = ''; 
     if (origsrc == 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg') src = 'img2_on.png'; 
     if (origsrc == 'img2_on.png') src = 'http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg'; 
     $(this).attr('src', src); 
    } 
}); 

Answer 3

SRC改變方法具有加載時間之後點擊圖片這可能會導致不必要的行爲。這是您的問題的一個優雅的解決方案。

fiddle

$(document).ready(function() { 
 
     $("#image_cont img").click(function(){ 
 
      $(this).hide(); 
 
      $(this).siblings("img").show(); 
 
     }); 
 
    
 
    }); 
 

 
    
 

 

.hidden{ 
 
     display:none; 
 
    } 
 
    img{ 
 
     width:100px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="image_cont"> 
 
     <img src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg"/> 
 
     <img class="hidden" src="http://cdn.searchenginejournal.com/wp-content/uploads/2013/09/google-panda-penguin.jpg"/> 
 
    </div>