使用jQuery切换图像

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

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

这里有一个小提琴的链接

---

您可以利用这一事实，即可以在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;
     });
 });

---

您可以利用这一事实，即可以在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 = '';      
         }
     });
});

---

您可以将旧的

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"/>​

---

请参阅fiddle:

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

---

请看小提琴：

请在这里显示一些代码，而不仅仅是在JSFIDLE上！请在这里显示一些代码，而不仅仅是在JSFIDLE上！这不会扩展-闭包只允许您存储一组状态。我同意，我给出此解决方案是因为问题中的

id

使用：

$（“#bg”）

这不会扩展-闭包只允许您存储一组状态。我同意，我给出此解决方案是因为问题中的

id

使用：

$（“#bg”）