使用jQuery切換圖像

Question

我發現這是我需要的，但我需要能夠在最後一次點擊時切換回第一個原始圖像。

所以我第一形象，我單擊要更改它，然後我需要再次點擊它能夠揭示 第一張圖像。

這裏是一個小提琴鏈接 http://jsfiddle.net/maniator/Sevdm/

Answer 1

你可以採取的事實，這是可能的任意屬性存儲在JS元素，例如，利益：

$(function() { 
    $('.menulink').on('click', function() { 
     var img = document.getElementById('bg'); 
     if (img.old) { // restore the original 
      img.src = img.old; 
      delete img.old; 
     } else {  // store original, and change 
      img.old = img.src; 
      img.src = 'http://.../'; 
     } 
     return false; 
    }); 
}); 

Answer 2

您可以保存舊src在一個變量值：

$(function() { 
    var old_img = ''; 
    $('.menulink').click(function(e){ 
     e.preventDefault(); 
     if(old_img == '') { 
      old_img = $("#bg").attr('src');     
      $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg"); 
     } else { 
      $("#bg").attr('src', old_img); 
      old_img = '';  
     } 
    }); 
}); 

jsFiddle

Answer 3

另一種解決方案，這使你可以保留所有的圖像在HTML，並添加更多的需要：

<a href="" title="Switch" class="menulink">switch me</a> 
<img src="http://placehold.it/333/3ef/img/picture1.jpg"/> 
<img src="http://placehold.it/333/fe3/img/picture2.jpg"/>​ 

和JavaScript（這是不是很可擴展性，但它是一個不錯的起點）：

$(function() { 
    var currentImage = 0; 
    $('img').not(':first').hide(0); 

    $('.menulink').click(function(e){ 
     e.preventDefault(); 
     $('img').eq(currentImage).hide(0); 
     currentImage = currentImage >= $('img').length-1 ? 0 : currentImage+1 
     $('img').eq(currentImage).show(0); 
    }); 
}); 

見琴：http://jsfiddle.net/e95K5/