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

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

創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、精河網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為精河等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

該網(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)效果如下

可見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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

分享名稱：jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能
文章路徑：http://muchs.cn/article40/gpjsho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、外貿(mào)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、小程序開發(fā)、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)