快捷導(dǎo)航

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

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

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

點(diǎn)贊，網(wǎng)絡(luò)用語(yǔ)，表示“贊同”、“喜愛(ài)”。

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

首先要引入JQuery插件

其次，我們需要定義一個(gè)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;
    }
   });
  });

實(shí)現(xiàn)效果如下

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

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

您可能感興趣的文章: