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>

使用jquery更改和更改背面图像

2 个答案: