jquery like and cancel effects

With the rise of social media, likes have become a popular way of socializing. Whether it’s a social media platform, blog, website or mobile app, likes have become an essential part of many website applications. WordPress, Weibo, WeChat, Facebook, Zhihu and other platforms all provide users with the like function, which adds interactivity and activity to the operation of the website.

In this article, we will learn how to implement jQuery like and cancel effects, integrate the like function on the website, and improve user interaction experience.

First of all, we need to prepare some preparatory work. In this example, we will create a slightly simpler Like button. We need some HTML code:

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

We can use the usual CSS styles to spruce up the appearance of the like button and counter.

The second step is to write the jQuery script. Here, we need to process the monitoring of click events and the like status.

First introduce the jQuery library into HTML:

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

Then write the jQuery script:

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

Let us analyze the code line by line:

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

We use a Variable to track the current like status, false means the like is not selected.

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

Create a counter and set the number of likes to 10 initially.

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

Use jQuery selector to select the like button on the page and bind a callback function to the click event.

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

Handle button click events in sequence. We check the value of isLiked and if it is false meaning the current button is not selected, then set it to true in the handler function. We update the button text, update the counter value, and set isLiked to true. This will face another conditional loop until the like status is no longer available.

});

Complete the click event processing function and end the closure.

Finally, we can enable our like button in the following ways:

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

The button style rendered in the example can be beautified through CSS. In addition, we can also style the counter.

To sum up, you can modify the style, add functions and adjust the code logic according to your needs to adapt to your website pages.

The above is the detailed content of jquery like and cancel effects. For more information, please follow other related articles on the PHP Chinese website!