溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
點贊，網絡用語，表示“贊同”、“喜愛”。
該網絡語來源于網絡社區的“贊”功能。送出和收獲的贊的多少、贊的給予偏好等，在某種程度能反映出你是怎樣的人以及處于何種狀態。點贊的背后，反映出你自己。與之對應的便是取消功能。恰巧最近博主在一款APP，其中一個版塊需要實現點贊和取消功能，經過思考決定用JQuery代碼實現它，好了廢話不多說，上干貨！！
首先要引入JQuery插件
其次，我們需要定義一個div，并給它一些樣式
然后就是JS代碼了，如下所示
$(document).ready(function(){
var onOff=true;
var div=$(".div");
div.click(function(){
if (div.onOff) {
div.val("關注我");
div.css({"background":'#ccc'});
div.onOff = false;
} else {
div.css({"background":'red'});
div.val("已關注");
div.onOff = true;
}
});
});
實現效果如下
可見JS代碼是好用的，同樣的，也可以實現圖片切換效果如下圖
其實現代碼如下
html:
<div class="div"></div>
css:注意圖片路徑
.div{
background-image: url(img/guanzhu.png);
width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;
}
JS代碼
$(document).ready(function(){
var onOff=true;
var div=$(".div");
div.click(function(){
if (div.onOff) {
div.css({"background-image":'url(img/guanzhu.png)'});
div.onOff = false;
} else {
div.css({"background-image":'url(img/yiguanzhu.png)'});
div.onOff = true;
}
});
});
以上所述是小編給大家介紹的jQuery實現點擊關注和取消功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
