我发现这是我需要的,但我需要能够在最后一次单击时切换回第一个原始图像。
所以我有第一张图片,我点击改变它,然后我需要再次点击它来显示第一张图片。
我发现这是我需要的,但我需要能够在最后一次单击时切换回第一个原始图像。
所以我有第一张图片,我点击改变它,然后我需要再次点击它来显示第一张图片。
您可以利用可以在 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;
});
});
您可以将旧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 = '';
}
});
});
另一种解决方案,这让您将所有图像保留在 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/