如何实现多个相同按钮的首次/二次点击差异化响应（JS过滤器场景）

我用JS做了个图片过滤器，有三个按钮（green、yellow、red），功能是给对应data-card属性匹配的图片添加/移除模糊效果——点一次按钮给匹配的图加模糊，再点一次取消。一开始用布尔标志位实现，结果出问题了：先点green（第一次点），再点red（第一次点），程序居然把red的点击当成了二次点击。现在靠一堆if语句凑合用，想找更优雅的实现方式。

优化思路 #

• 用状态对象替代单个布尔变量，每个按钮对应一个键值对，独立记录当前是否处于激活（已添加模糊）状态
• 点击按钮时先切换该按钮的状态，再根据状态对匹配图片批量操作
• 避免冗余if判断，逻辑更清晰易维护

代码实现示例 #

HTML结构 #

<div class="buttons">
  <button data-filter="green">Green</button>
  <button data-filter="yellow">Yellow</button>
  <button data-filter="red">Red</button>
</div>
<div class="images">
  <img data-card="green" src="https://picsum.photos/id/10/200/200" alt="Green card">
  <img data-card="yellow" src="https://picsum.photos/id/11/200/200" alt="Yellow card">
  <img data-card="red" src="https://picsum.photos/id/12/200/200" alt="Red card">
  <img data-card="green" src="https://picsum.photos/id/13/200/200" alt="Green card">
  <img data-card="yellow" src="https://picsum.photos/id/14/200/200" alt="Yellow card">
  <img data-card="red" src="https://picsum.photos/id/15/200/200" alt="Red card">
</div>

CSS样式 #

.buttons {
  margin-bottom: 20px;
}
.buttons button {
  padding: 8px 16px;
  margin-right: 10px;
  cursor: pointer;
}
.buttons button.active {
  background-color: #ddd;
}
.images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
img {
  transition: filter 0.3s ease;
}
.blur {
  filter: blur(5px);
}

JS逻辑 #

// 初始化状态对象，独立记录每个过滤器的激活状态
const filterStates = {
  green: false,
  yellow: false,
  red: false
};

const buttons = document.querySelectorAll('.buttons button');
const images = document.querySelectorAll('.images img');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const filterType = button.dataset.filter;
    // 切换当前过滤器的状态
    filterStates[filterType] = !filterStates[filterType];
    
    // 更新按钮激活样式（可选，提升交互反馈）
    button.classList.toggle('active', filterStates[filterType]);
    
    // 批量处理对应图片的模糊效果
    images.forEach(img => {
      if (img.dataset.card === filterType) {
        img.classList.toggle('blur', filterStates[filterType]);
      }
    });
  });
});

方案优势 #

• 每个按钮状态独立存储，彻底解决不同按钮状态互相干扰的问题
• 用classList.toggle()替代手动添加/移除类，代码更简洁
• 状态管理集中，后续新增过滤器（比如blue）只需在filterStates里加个键，无需修改核心逻辑
• 去掉了冗余的嵌套if判断，可读性和可维护性大幅提升

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