jQuery为MySQL生成的不同ID按钮单独加类及localStorage存储方案

点击单个按钮仅修改当前元素样式 #

你之前硬编码指定#idLike-2的写法只能匹配单个固定元素，要实现通用逻辑不需要逐个绑定ID，直接给所有点赞按钮的公共类绑定事件，通过jQuery内置的$(this)指向当前触发事件的元素即可，不需要单独匹配每个ID。
基础实现代码：

$(document).ready(function(){
  // 绑定所有带like-btn类的按钮
  $(".like-btn").click(function(){
    // $(this) 就代表当前被点击的那个按钮
    $(this).addClass("btn-first");
  });
});

修复localStorage状态全局同步问题 #

你之前写的localStorage逻辑有三个明显问题：

• 只存了一个全局的isCliked布尔值，没有记录具体是哪个按钮被点击，页面加载时只要这个值存在就会给所有按钮加上已点赞样式
• 嵌套了两层冗余的$(document).ready()监听
• 初始化时直接修改所有按钮的类名，会导致已经被标记为已点赞的按钮因为类名从like-btn变成liked-btn，后续绑定的点击事件无法匹配到这些元素，点击失效

修复思路很简单：存储已点赞按钮的唯一ID列表，而不是存全局状态；页面初始化时逐个匹配按钮ID，只给在已点赞列表里的按钮加样式；用事件委托绑定点击事件，避免类名变化导致事件失效。
完整可运行代码：

$(document).ready(function() {
  // 读取本地存储的已点赞按钮ID列表，无数据时初始化为空数组
  let likedIds = JSON.parse(localStorage.getItem('likedButtonIds')) || [];

  // 初始化页面状态
  $(".like-btn").each(function() {
    const currentBtnId = $(this).attr("id");
    if (likedIds.includes(currentBtnId)) {
      $(this).addClass('liked-btn').removeClass('like-btn');
    }
  });

  // 事件委托绑定点击，兼容类名变化后的元素
  $(document).on('click', '.like-btn, .liked-btn', function() {
    const $btn = $(this);
    const btnId = $btn.attr("id");

    if ($btn.hasClass('like-btn')) {
      // 切换为已点赞状态
      $btn.addClass('liked-btn').removeClass('like-btn');
      if (!likedIds.includes(btnId)) {
        likedIds.push(btnId);
      }
    } else {
      // 切换为未点赞状态
      $btn.addClass('like-btn').removeClass('liked-btn');
      likedIds = likedIds.filter(id => id !== btnId);
    }

    // 把更新后的ID列表存回本地存储
    localStorage.setItem('likedButtonIds', JSON.stringify(likedIds));
  });
});

代码直接复用了你PHP生成的按钮ID（idLike-1/idLike-2/idLike-3）作为唯一标识，不需要修改后端生成的HTML代码，直接替换原有前端JS即可生效。

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