原型大概是这样的

jQuery实现点击开关图片切换_html

image

需求:点击右侧的蓝色眼睛,会变成

关键代码:

/* 实现图片切换 */

$(".imgclick").toggle(function(){

$(this).attr("src","img/close.png");

},function(){

$(this).attr("src","img/open.png");

}).attr("src","img/open.png");

其实原理很简单,就是利用toggle的参数切换不同函数。

可以直接复制黏贴的demo

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>

<body>
<div>
<img class="imgclick" src="img/close.png" />
</div>

<div>
<img class="imgclick" src="img/close.png" />
</div>
</body>
<script>
/* 实现图片切换 */
$(".imgclick").toggle(function() {
$(this).attr("src", "img/close.png");
}, function() {
$(this).attr("src", "img/open.png");
}).attr("src", "img/open.png");
</script>

</html>