JQuery實現點擊關注和取消功能

標籤：htm   http   app   功能   一個   src   ges   意圖   社區   

點贊，網路用語，表示“贊同”、“喜愛”。該網路語來源於網路社區的“贊”功能。送出和收穫的贊的多少、贊的給予偏好等，在某種程度能反映出你是怎樣的人以及處於何種狀態。點贊的背後，反映出你自己。與之對應的便是取消功能。恰巧最近博主在一款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實現點擊關注和取消功能