如何优化给每个元素添加active、hidden类的冗余代码，写出更简洁的代码？

你的核心问题是重复操作单个元素导致代码冗余，下面是简洁的优化方案：

步骤1：统一元素标识 #

给所有食品区域元素添加共同的类名（比如food-item），同时用data-category属性标记每个元素所属分类（breakfast/lunch），示例HTML结构：

<div class="food-item" data-category="breakfast">早餐区域1</div>
<div class="food-item" data-category="lunch">午餐区域1</div>
<!-- 其他食品区域同理 -->

步骤2：重构JS逻辑 #

用querySelectorAll一次性获取所有食品元素，通过遍历集合统一处理类名，避免重复代码：

// 获取所有食品元素
const foodItems = document.querySelectorAll('.food-item');
// 获取三个分类按钮
const allButton = document.querySelector('.all-btn');
const breakfastButton = document.querySelector('.breakfast-btn');
const lunchButton = document.querySelector('.lunch-btn');

// 全部按钮逻辑
allButton.addEventListener('click', () => {
  foodItems.forEach(item => {
    item.classList.add('active');
    item.classList.remove('hidden');
  });
});

// 早餐按钮逻辑
breakfastButton.addEventListener('click', () => {
  foodItems.forEach(item => {
    if (item.dataset.category === 'breakfast') {
      item.classList.add('active');
      item.classList.remove('hidden');
    } else {
      item.classList.remove('active');
      item.classList.add('hidden');
    }
  });
});

// 午餐按钮逻辑
lunchButton.addEventListener('click', () => {
  foodItems.forEach(item => {
    if (item.dataset.category === 'lunch') {
      item.classList.add('active');
      item.classList.remove('hidden');
    } else {
      item.classList.remove('active');
      item.classList.add('hidden');
    }
  });
});

优化优势 #

• 代码量大幅减少，避免重复的类名操作
• 扩展性强：新增食品元素或分类时，只需添加对应类名和data-category属性，无需修改JS逻辑
• 逻辑更清晰，便于维护

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