jQuery点赞按钮重复点击多次加1，如何判断active类不存在时执行操作？

问题原因 #

你的原有代码存在两个逻辑错误，导致修改不生效+重复点击累加：

1. 你把active类的判断放在了success回调中，但点击事件触发的第一时间你就主动给按钮加了active类，进入回调时按钮必然已经携带该类，直接触发return false，自然不会更新数值。
2. 你没有在点击事件的入口处做拦截，每次点击都会触发AJAX请求执行数值累加逻辑，自然会出现重复点击多次加1的问题。

修复方案 #

将active类的判断挪到点击事件的最开始，只要按钮已经携带该类就直接终止后续所有操作，修改后的完整代码如下：

$(function() {
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
    },
  });

  $('.like-button').on('click', function(event) {
    event.preventDefault();
    const targetElement = $(this);
    // 核心拦截逻辑：已经点赞过直接终止操作
    if (targetElement.hasClass('active')) {
      return false;
    }
    // 先加active类，防止请求过程中用户重复点击
    targetElement.addClass('active');
    const href = targetElement.attr('href');

    $.ajax({
      url: href,
      type: 'POST',
      success: function() {
        const current = parseInt(targetElement.find('.comments-sub-header__item-icon-count').html());
        targetElement.find('.comments-sub-header__item-icon-count').html(current + 1);
      },
      error: function() {
        // 请求异常时移除active类，允许用户重试
        targetElement.removeClass('active');
      }
    });
  });
});

额外优化说明 #

你的后端已经实现了基于Cookie的24小时重复点赞拦截逻辑，且前端模板渲染时会根据hasLikedToday方法主动给已经点赞过的按钮加上active类，页面刷新后已点赞的按钮不会被重复触发，配合上述前端点击拦截逻辑即可完全避免重复点赞的问题。
如果需要更严谨，还可以在success回调中判断后端返回的内容，只有后端返回点赞成功的响应时再更新数值，避免极端场景下DOM数值和后端实际存储数值不一致。

内容的提问来源于stack exchange，提问作者user16993770