原型大概是这样的
需求:点击右侧的蓝色眼睛,会变成
关键代码:
/* 实现图片切换 */ $(".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>