网站开发新手求助：如何让特定post的点赞/点踩按钮点击后仅自身消失？

嘿，我完全懂你现在的困扰——这绝对是前端新手处理DOM事件时最容易踩的小坑之一！问题出在你隐藏按钮的时候，选中了页面上所有同类型的按钮，而不是只针对被点击的那个按钮或者它所属的单篇帖子里的对应按钮。下面给你两种最常用的解决方案，你可以根据自己用的技术栈来选：

1. 原生JavaScript 解决方案 #

假设你的HTML结构大概是这样的（每个帖子有一个容器，里面包含点赞/点踩按钮）：

<div class="post" data-post-id="1">
  <button class="upvote-btn">+1</button>
  <button class="downvote-btn">-1</button>
</div>
<div class="post" data-post-id="2">
  <button class="upvote-btn">+1</button>
  <button class="downvote-btn">-1</button>
</div>

你可以通过事件对象获取当前被点击的按钮，然后只隐藏它（或者它所在帖子里的对应按钮）：

// 给所有点赞按钮绑定点击事件
document.querySelectorAll('.upvote-btn').forEach(btn => {
  btn.addEventListener('click', function(event) {
    // 1. 隐藏当前被点击的点赞按钮
    event.target.style.display = 'none';
    
    // 2. 如果需要同时隐藏当前帖子里的点踩按钮
    // 先找到当前按钮所属的帖子容器
    const currentPost = event.target.closest('.post');
    // 在这个容器里找对应的点踩按钮并隐藏
    currentPost.querySelector('.downvote-btn').style.display = 'none';
    
    // 这里可以继续写你的点赞逻辑（比如发送请求到后端）
  });
});

关键知识点：

• event.target：指向当前被点击的那个具体按钮，而不是所有同类型按钮
• closest('.post')：找到当前按钮最近的父级.post容器，确保操作只限制在当前帖子范围内

如果你的帖子是动态生成的（比如从后端加载后添加到页面），要改用事件委托，避免新生成的按钮无法触发事件：

// 给父容器（或者document）绑定事件，监听点击事件
document.addEventListener('click', function(event) {
  // 判断点击的是不是点赞按钮
  if (event.target.matches('.upvote-btn')) {
    event.target.style.display = 'none';
    const currentPost = event.target.closest('.post');
    currentPost.querySelector('.downvote-btn').style.display = 'none';
    // 你的点赞逻辑...
  }
});

2. jQuery 解决方案 #

如果你用jQuery开发，代码会更简洁，核心思路一样——用$(this)指代当前被点击的按钮：

// 绑定点赞按钮的点击事件
$('.upvote-btn').on('click', function() {
  // 隐藏当前被点击的点赞按钮
  $(this).hide();
  // 隐藏当前帖子里的点踩按钮
  $(this).closest('.post').find('.downvote-btn').hide();
  
  // 你的点赞逻辑...
});

同样，动态生成的帖子要用事件委托：

$(document).on('click', '.upvote-btn', function() {
  $(this).hide();
  $(this).closest('.post').find('.downvote-btn').hide();
  // 你的点赞逻辑...
});

额外注意事项 #

• 确保每个帖子都有一个统一的容器类（比如.post），这是精准定位当前帖子的关键
• 如果不想完全隐藏按钮，也可以改成禁用状态（比如event.target.disabled = true），这样用户就不能重复点击了

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