本文介绍在多卡片场景下，如何通过状态标记机制确保每个卡片的“点赞”或“踩”按钮仅响应一次点击，避免重复计数与样式误改，同时不影响其他卡片的独立交互。

在实际开发中，尤其是基于循环渲染的卡片列表（如资讯流、商品卡片），常需为每张卡片提供“点赞”和“踩”功能。原始代码存在两个关键问题：

1. 事件重复绑定：每次调用 contentLike_Dislike() 都会重新为所有 .fa-thumbs-up 或 .fa-thumbs-down 元素绑定 click 事件，导致多次点击后图标样式反复切换（如多次加 fa 类）；
2. 全局影响：使用类选择器（如 $(".fa-thumbs-up").click(...)）会作用于全页所有匹配元素，而非当前卡片，破坏各卡片状态隔离性。

✅ 正确解法不是“移除事件监听器”，而是从业务逻辑层阻止重复操作——即为每个 contentid 维护独立的已操作状态，并在函数入口做拦截。

✅ 推荐实现：基于 ID 的操作状态管理

使用一个 Set（或数组）记录已触发过 Like/Dislike 的 contentid，并在每次调用前校验：

// 使用 Set 实现 O(1) 查找，更高效且自动去重
const operatedIds = new Set();

function contentLike_Dislike(contentid, islike) {
  const key = `${contentid}-${islike}`; // 区分 like/dislike 操作（同一卡片可单独点赞/踩）

  if (operatedIds.has(key)) {
    console.warn(`Operation [${key}] already performed. Ignored.`);
    return;
  }

  // 执行业务逻辑
  if (islike === "true") {
    const $likeP = $(`#p-like-${contentid}`);
    const count = parseInt($likeP.text()) || 0;
    $likeP.text(count + 1).removeClass("d-none");

    // 仅更新当前卡片内的图标（使用 closest 定位父卡片，再 find 子元素）
    $likeP.closest('.d-flex').find('.fa-thumbs-up')
      .removeClass('far').addClass('fa');
  } else {
    const $dislikeP = $(`#p-dislike-${contentid}`);
    const count = parseInt($dislikeP.text()) || 0;
    $dislikeP.text(count + 1).removeClass("d-none");

    $dislikeP.closest('.d-flex').find('.fa-thumbs-down')
      .removeClass('far').addClass('fa');
  }

  // 标记该操作已完成
  operatedIds.add(key);
}

? 关键优化说明

• 精准作用域控制：通过 $likeP.closest('.d-flex') 定位到当前卡片容器（即 的父级 .d-flex），再 find() 其内部图标，彻底避免跨卡片污染；
• 原子化状态键：key = "${contentid}-${islike}" 确保同一卡片可分别点赞/踩（互不干扰），也支持未来扩展（如取消点赞）；
• 无事件监听器泄漏：不再动态绑定 .click()，完全规避 jQuery 事件堆积风险；
• DOM 更新安全：.removeClass("d-none") 确保计数

  在首次点击后可见（原示例中初始为 d-none）。

⚠️ 注意事项

• 若需支持“取消点赞”（二次点击取消），应改用布尔对象映射（如 const userActions = { '21785': { like: true, dislike: false } }），并动态切换样式与计数；
• 建议后续重构为事件委托（如 $(document).on('click', '[data-action="like"]', handler)），彻底摆脱内联 onclick，提升可维护性与性能；
• 生产环境建议将 operatedIds 存入 localStorage 或与后端同步，实现跨会话持久化（如用户刷新后仍禁用已操作按钮）。

此方案轻量、可靠、无副作用，完美适配遗留代码改造场景，是多实例组件防重复交互的经典实践。