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

時間 2019-12-04

原文原文鏈接

點贊，網絡用語，表示「贊同」、「喜好」。

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

首先要引入JQuery插件

其次，咱們須要定義一個div，並給它一些樣式css

而後就是JS代碼了，以下所示html

$(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代碼是好用的，一樣的，也能夠實現圖片切換效果以下圖url

其實現代碼以下spa

html:插件

<div class="div"></div>

css:注意圖片路徑code

.div{
                 background-image: url(img/guanzhu.png);
                 width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;
             }

JS代碼htm

$(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;
        
                        }
                    });
              });