首頁  >  文章  >  web前端  >  JQuery怎麼實現點擊關注和取關的功能

JQuery怎麼實現點擊關注和取關的功能

WBOY
WBOY原創
2017-07-24 17:14:161431瀏覽

按讚,網路用語,表示「贊同」、「喜愛」。

此網絡語源自於網路社群的「讚」功能。送出和收穫的讚的多少、讚的給予偏好等,在某種程度能反映出你是怎樣的人以及處於何種狀態。點讚的背後,反映出你自己。與之對應的便是取消功能。恰巧最近部落客在一款APP,其中一個版塊需要實現點讚和取消功能,經過思考決定用JQuery代碼實現它,好了廢話不多說,上乾貨! !

首先要引入JQuery外掛

JQuery怎麼實現點擊關注和取關的功能

#其次,我們需要定義一個div,並且給它一些樣式

JQuery怎麼實現點擊關注和取關的功能

JQuery怎麼實現點擊關注和取關的功能

# 然後就是JS程式碼了,如下圖

$(document) .ready(function(){

  var onOff=true;

  var div=$(".div");

#  div.click(function( ){ 

    if (div.onOff) {

     div.val("留意我");

     div.css({"background.css({"background":'

##     div.css({"background. });

     div.onOff = false;

    } else {

     div.css({"background":'red'});

#' #      div.val("已關注");

     div.onOff = true;

    }

   });

JQuery怎麼實現點擊關注和取關的功能

>

#   

JQuery怎麼實現點擊關注和取關的功能實現效果如下

#可見JS程式碼是好用的,同樣的,也可以實現圖片切換效果如下圖

其實作程式碼如下

html:   

   

css:注意圖片路徑

##.div{

     background-image: url(img/guanzhu.png);

     width: 100px;height: 40px; #    }

   

JS程式碼 

$(document).ready(function(){

    var onOff=true;

    var div=$(".div");

卷[ div.css({"background-image":'url(img/guanzhu.png)'});

       div.onOff = false;

#  #       div.css({"background-image":'url(img/yiguanzhu.png)'});

       div.onOOff 

#ff      div.onOOff 

#ff });

    });

   


以上是JQuery怎麼實現點擊關注和取關的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn