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

點贊，網絡用語，表示“贊同”、“喜愛”。

該網絡語來源於網絡社區的“贊”功能。送出和收獲的贊的多少、贊的給予偏好等，在某種程度能反映出你是怎樣的人以及處於何種狀態。點贊的背后，反映出你自己。與之對應的便是取消功能。恰巧最近博主在一款APP，其中一個版塊需要實現點贊和取消功能，經過思考決定用JQuery代碼實現它，這只是一個簡單的改變css樣式，好了廢話不多說，上干貨！！

首先要引入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;
        
                        }
                    });
              });

 這只是一個簡單的demo，有更好想法的大神可以多多交流哦

好了，本期分享就到這里，白了個白