jquery按讚和取消效果

隨著社群媒體的興起，按讚已經成為了一種流行的社交方式。無論是社群媒體平台、部落格、網站還是行動應用，按讚都成為了許多網站應用程式中必不可少的一部分。 WordPress、微博、微信、臉書、知乎等各種平台都為用戶提供了點讚功能，這為網站的運作增加了互動性和活躍度。

在本文中，我們將學習如何實現jQuery按讚和取消效果，在網站上整合點讚功能，提高使用者互動體驗。

首先，我們需要準備一些前置工作。在這個範例中，我們將建立一個略微簡單的讚按鈕。我們需要一些HTML程式碼：

<div class="like">
  <span class="count">10</span>
  <a href="#" class="like-btn">点赞</a>
</div>

我們可以使用通常的CSS樣式來美化按讚按鈕和計數器的外觀。

其次是jQuery腳本的編寫，在這裡，我們需要對點擊事件的監聽和按讚狀態進行處理。

首先在HTML 中引入jQuery 函式庫：

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

然後寫jQuery 腳本：

$(document).ready(function() {
 
  // 初始化点赞状态
  var isLiked = false;
 
  // 初始化点赞计数器
  var count = 10;
 
  // 绑定点赞按钮点击事件
  $('.like-btn').click(function() {
 
    if (isLiked) {
      // 取消点赞状态
      isLiked = false;
      // 更新按钮文案
      $(this).text('点赞');
      // 更新点赞计数器
      $('.count').text(--count);
    } else {
      // 添加点赞状态
      isLiked = true;
      // 更新按钮文案
      $(this).text('取消');
      // 更新点赞计数器
      $('.count').text(++count);
    }
 
  });
 
});

讓我們逐行分析程式碼：

// 初始化点赞状态
var isLiked = false;

我們使用一個變數來追蹤目前按讚狀態，false 表示按讚未被選取。

// 初始化点赞计数器
var count = 10;

建立一個計數器，設定按讚數最初為 10。

// 绑定点赞按钮点击事件
$('.like-btn').click(function() {

使用 jQuery 選擇器來選取頁面中的讚按鈕，並在點擊事件上綁定一個回呼函數。

if (isLiked) {
  // 取消点赞状态
  isLiked = false;
  // 更新按钮文案
  $(this).text('点赞');
  // 更新点赞计数器
  $('.count').text(--count);
} else {
  // 添加点赞状态
  isLiked = true;
  // 更新按钮文案
  $(this).text('取消');
  // 更新点赞计数器
  $('.count').text(++count);
}

依序處理按鈕的點選事件。我們檢查 isLiked 的值，如果它是 false 表示當前按鈕沒有被選中，那麼在處理函數中將其設為 true。我們更新按鈕文本，更新計數器的值，然後將 isLiked 設為 true。這將面臨另一個條件循環，直到不再具備點讚狀態。

});

完成點擊事件的處理函數，並結束閉包。

最後，我們可以透過以下方式來啟用我們的讚按鈕：

<div class="like">
  <span class="count">10</span>
  <button class="like-btn">点赞</button>
</div>

範例中渲染出來的按鈕樣式可以透過 CSS 來美化。此外，我們也可以對計數器進行樣式調整。

綜上所述，您可以根據需要修改樣式、增加功能以及調整程式碼邏輯來適應您的網站頁面。

以上是jquery按讚和取消效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！