使用jQuery实现点赞/点踩按钮的互斥状态切换技术问询

嘿，我来帮你搞定这个点赞点踩的交互逻辑！你已经有了基础的HTML结构，只需要补全交互逻辑和样式就能实现「同一时间仅一个按钮激活」的效果，具体步骤如下：

先把你未写完的点赞按钮补全，同时确保每个按钮的ID能关联到对应的tag_number_id，方便后续JS定位：

<!-- 点踩按钮 -->
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_<?php echo $row['tag_number_id']; ?>" value="unlike">
  <i class="fas fa-thumbs-down fa-lg"></i>
</button>

<!-- 点赞按钮 -->
<button type="button" class="bout like bthumb boutontagthumbup" id="like_<?php echo $row['tag_number_id']; ?>" value="like">
  <i class="fas fa-thumbs-up fa-lg"></i>
</button>

给激活状态加个明显的视觉区分，比如改变颜色（你可以根据自己的设计调整）：

/* 激活状态样式 */
.bthumb.active {
  color: #2563eb; /* 蓝色高亮，可替换成你需要的颜色 */
  font-weight: bold;
}

因为你的按钮是PHP动态生成的，所以用事件委托来绑定点击事件更稳妥（避免动态元素绑定失效的问题），同时处理按钮状态切换：

// 监听整个文档的点击事件，委托给点赞/点踩按钮
document.addEventListener('click', function(e) {
  // 找到点击的按钮（包括点击图标时向上查找父按钮）
  const clickedBtn = e.target.closest('.bthumb');
  if (!clickedBtn) return; // 不是目标按钮则退出

  // 从按钮ID中提取对应的tag_number_id
  const tagId = clickedBtn.id.split('_')[1];
  // 获取同一组的点赞和点踩按钮
  const likeBtn = document.getElementById(`like_${tagId}`);
  const unlikeBtn = document.getElementById(`unlike_${tagId}`);

  // 根据点击的按钮类型切换状态
  if (clickedBtn.value === 'like') {
    // 点赞按钮被点击：激活点赞，取消点踩
    likeBtn.classList.add('active');
    unlikeBtn.classList.remove('active');
    // 可选：发送AJAX请求到后端，保存点赞状态
    // saveVoteStatus(tagId, 'like');
  } else if (clickedBtn.value === 'unlike') {
    // 点踩按钮被点击：激活点踩，取消点赞
    unlikeBtn.classList.add('active');
    likeBtn.classList.remove('active');
    // 可选：发送AJAX请求到后端，保存点踩状态
    // saveVoteStatus(tagId, 'unlike');
  }
});

// 可选：封装保存投票状态的AJAX函数
function saveVoteStatus(tagId, action) {
  fetch('/your-backend-api.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `tag_id=${tagId}&action=${action}`
  })
  .then(res => res.json())
  .then(data => {
    console.log('投票状态已保存:', data);
  })
  .catch(err => {
    console.error('保存失败:', err);
  });
}

• 用closest('.bthumb')确保点击按钮内部的图标时也能触发事件，避免交互死角。
• 通过ID拆分获取tag_number_id，精准定位同一组的两个按钮，保证状态切换不会影响其他组的按钮。
• 切换active类实现互斥激活，确保同一时间只有一个按钮处于高亮状态。
• 加上AJAX请求可以把投票状态同步到后端，刷新页面后状态依然能保留。

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