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

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

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

點贊，網絡用語，表示“贊同”、“喜愛”。

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

首先要引入JQuery插件

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

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

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

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

您可能感興趣的文章:

jQuery實現(xiàn)表單驗證
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表單驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
JQuery實現(xiàn)DIV其他動畫效果的簡單實例
下面小編就為大家?guī)硪黄狫Query實現(xiàn)DIV其他動畫效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
jQuery 標題的自動翻轉實現(xiàn)代碼
我們平時在開發(fā)web程序的時候，想把一個新聞源滾動顯示新聞的條目的標題及內容摘要，而且是每次一條，有點類似csdn的滾動廣告。
2009-10-10
asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼，比頁面刷新更好，用戶體驗更好，需要的朋友可以參考下。
2010-09-09
json格式的javascript對象用法分析
這篇文章主要介紹了json格式的javascript對象用法,結合實例形式總結分析了javascript針對json格式數(shù)據(jù)操作的常見技巧,需要的朋友可以參考下
2016-07-07
讓頁面上兩個div中的滾動條(滑塊)同步運動示例
如何想讓頁面上兩個div中的滾動條(滑塊)同步運動該怎實現(xiàn)，具體代碼如下，感興趣的朋友可以參考下
2013-08-08
jquery插件實現(xiàn)圖片對比
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)圖片對比，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jquery中實現(xiàn)簡單的tabs插件功能的代碼
jquery改變了程序員寫javascript的方式。作為jquery的愛好者和新手，最近我學會了用寥寥幾句jquery代碼實現(xiàn)類似tabs插件的功能，相信此文能為許多剛入門的jquery愛好者和想實現(xiàn)tabs插件功能的朋友帶來一些幫助。
2011-03-03
jQuery手指滑動輪播效果
本文給大家分享一段jquery代碼實現(xiàn)手指滑動輪播效果，代碼簡單易懂，非常不錯，需要的朋友參考下
2016-12-12
jquery ztree實現(xiàn)模糊搜索功能
這篇文章主要為大家詳細介紹了jquery ztree實現(xiàn)模糊搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-02-02