jquery - 用jquery改变和改变图像

Question

我找到了一种在单击图像时更改图像的方法...但是我正在寻找循环，这意味着再次单击并取回旧图像，然后再次单击以获取新图像（仅需要 2 张图像）。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ChangeImage").click(function(){
$('#ChangeImage').attr('src','image2.jpg');
});
});
</script>
<img src="image1.jpg" name="my_pic" id="ChangeImage">

我找不到反之亦然的方法……感谢您的帮助！

Answer 1

您可以将一个函数传递给attr，该函数将传入当前的src. 在更改之前检查：

$("#ChangeImage").click(function () {
    $(this).attr('src', function (index, currentSource) {
        return currentSource == 'image2.jpg' ? 'image1.jpg' : 'image2.jpg';
    });
});

这是小提琴：http: //jsfiddle.net/3yZNT/

---

如果您使用的是更现代的 jQuery 版本（1.6+），则应prop使用attr.

Answer 2

这是另一种方法

$("#ChangeImage").click(function() {
    $(this).find('img').toggle();
});​

<div id="ChangeImage"><img src="image1.png"/>
<img src="image2.png" style="display:none"/>
</div>