當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery实现点击开关图片切换

發布時間：2025/4/9 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery实现点击开关图片切换小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原型大概是這樣的

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>

轉載于:https://www.cnblogs.com/ting6/p/9725509.html

總結

以上是生活随笔為你收集整理的jQuery实现点击开关图片切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [Codeforces 10E] Gre
下一篇： tableView 使用 reloadS