jQuery实现：当元素拥有Clicked类时触发点击事件并弹出unliked提示

Got it, let's get this like/unlike functionality working exactly how you need it! Here's the step-by-step fix:

1. 确认你的HTML结构（保持不变） #

<div class="social">
  <div class="LikePost default"></div>
</div>

2. 完善点击事件的核心逻辑 #

Your existing click handler was missing the "unlike" logic in the else block. We'll add class switching and the required alert here, plus a small performance tweak by caching the jQuery object:

$('.LikePost').on('click', function() {
  // 缓存当前元素的jQuery对象，避免重复DOM查找
  const $likeButton = $(this);
  
  if ($likeButton.hasClass("default")) {
    // 点赞状态：切换类并提示
    $likeButton.addClass("Clicked").removeClass("default");
    alert("post liked");
  } else {
    // 取消点赞状态：切回原始类并提示
    $likeButton.addClass("default").removeClass("Clicked");
    alert("unliked");
  }
});

3. 修正触发点击的条件逻辑 #

Your original trigger code didn't check for the Clicked class first. We'll wrap it in a condition to only fire when the button is in the "liked" state:

// 定位到点赞按钮
const $targetButton = $(".social").find(".LikePost");

// 只有当按钮拥有Clicked类时，才触发点击事件
if ($targetButton.hasClass("Clicked")) {
  $targetButton.trigger("click");
}

Key Notes: #

• Class Consistency: Make sure you stick to your capitalization (Clicked vs default) — jQuery class selectors are case-sensitive!
• Performance Tip: Caching $(this) as $likeButton saves the browser from re-querying the DOM every time, which is a common jQuery best practice.
• Reusability: If you want to trigger this "unlike" action from another element (like a separate "undo" button), just drop the conditional trigger code into that element's click handler.

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