原型大概是這樣的
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>
==================================================================
注意：本文原創作者祈澈姑娘，創作不易。轉載請標明作者和文章的原文鏈接，或到微信公眾號獲取授權。
若需要轉載，聯系原文作者
更多技術文章，行業交流，web前端開發資源，前端交流群，開源代碼，前端干貨，職場感悟，求職指導，請點擊公眾號原文鏈接：祈澈姑娘
或者聯系我的微信，創作不易，走過路過點個贊唄