如何简化这段重复冗余的JavaScript卡片切换脚本？

核心思路 #

不用给每个卡片单独绑定事件，用事件委托统一处理所有交互逻辑，既能消除重复代码，还能减少DOM事件绑定数量、提升性能。

完整优化代码 #

// 获取卡片的父容器（需确保所有.section1-item都在这个容器内）
const cardContainer = document.querySelector('.section1-container');
// 获取所有索引点（假设索引点类名为.section-dot）
const indicatorDots = document.querySelectorAll('.section-dot');

// 给父容器绑定单次点击事件
cardContainer.addEventListener('click', function(e) {
  // 定位到实际被点击的卡片元素
  const targetCard = e.target.closest('.section1-item');
  if (!targetCard) return; // 点击的不是卡片区域，直接退出

  // 1. 统一处理卡片的.active-card类
  document.querySelectorAll('.section1-item').forEach(card => {
    card.classList.remove('active-card');
  });
  targetCard.classList.add('active-card');

  // 2. 切换所有卡片内的图片源
  const allCardImgs = document.querySelectorAll('.section1-item img');
  allCardImgs.forEach(img => {
    img.src = 'images/tcheen-logo-white.png';
  });
  targetCard.querySelector('img').src = 'images/tcheen-logo-jaune.png';

  // 3. 同步对应索引点的激活状态
  const cardIndex = Array.from(cardContainer.children).indexOf(targetCard);
  indicatorDots.forEach((dot, index) => {
    dot.classList.toggle('active-dot', index === cardIndex);
  });
});

关键优化细节 #

• 事件委托：仅给父容器绑定1个事件，替代给N个卡片绑定N个事件的冗余操作，后续新增卡片也无需额外绑定事件。
• 批量DOM操作：通过querySelectorAll一次性获取所有目标元素，避免重复查询DOM节点，提升执行效率。
• 索引自动匹配：通过Array.from(cardContainer.children).indexOf(targetCard)自动获取当前卡片的位置索引，无需手动给每个卡片标记索引值，逻辑更灵活。

额外注意 #

• 确保卡片父容器的类名.section1-container和实际HTML结构匹配，若父容器类名不同，替换成对应名称即可。
• 索引点的激活类名假设为.active-dot，如果你的项目中是其他类名，替换成实际类名即可。

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