使用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/