0

我发现这是我需要的,但我需要能够在最后一次单击时切换回第一个原始图像。

所以我有第一张图片,我点击改变它,然后我需要再次点击它来显示第一张图片。

这是小提琴 http://jsfiddle.net/maniator/Sevdm/的链接

4

3 回答 3

2

您可以利用可以在 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;
     });
 });
于 2012-08-07T12:40:07.340 回答
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

于 2012-08-07T12:42:03.217 回答
0

另一种解决方案,这让您将所有图像保留在 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/

于 2012-08-07T12:54:28.927 回答