隨著社群媒體的興起，按讚已經成為了一種流行的社交方式。無論是社群媒體平台、部落格、網站還是行動應用，按讚都成為了許多網站應用程式中必不可少的一部分。 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中文網其他相關文章！
