快捷導(dǎo)航

jQuery實現(xiàn)點擊關(guān)注和取消功能

更新時間：2017年07月03日 09:22:41 作者：李大寶

點贊，網(wǎng)絡(luò)用語，表示“贊同”、“喜愛”。今天小編通過實例代碼給大家分享jQuery實現(xiàn)點擊關(guān)注和取消功能，需要的朋友參考下吧

點贊，網(wǎng)絡(luò)用語，表示“贊同”、“喜愛”。

該網(wǎng)絡(luò)語來源于網(wǎng)絡(luò)社區(qū)的“贊”功能。送出和收獲的贊的多少、贊的給予偏好等，在某種程度能反映出你是怎樣的人以及處于何種狀態(tài)。點贊的背后，反映出你自己。與之對應(yīng)的便是取消功能。恰巧最近博主在一款A(yù)PP，其中一個版塊需要實現(xiàn)點贊和取消功能，經(jīng)過思考決定用JQuery代碼實現(xiàn)它，好了廢話不多說，上干貨！！

首先要引入JQuery插件

其次，我們需要定義一個div，并給它一些樣式

然后就是JS代碼了，如下所示

$(document).ready(function(){
  var onOff=true;
  var div=$(".div");
  div.click(function(){  
    if (div.onOff) {
     div.val("關(guān)注我");
     div.css({"background":'#ccc'});
     div.onOff = false;
    } else {
     div.css({"background":'red'});
      div.val("已關(guān)注");
     div.onOff = true;
    }
   });
  });

實現(xiàn)效果如下

可見JS代碼是好用的，同樣的，也可以實現(xiàn)圖片切換效果如下圖

其實現(xiàn)代碼如下

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實現(xiàn)點擊關(guān)注和取消功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: