求精简Vanilla JavaScript代码：点击显示单图并隐藏其余图片

核心思路 #

不用针对每张图片写重复的if-else分支，而是通过统一遍历所有图片元素来处理类的添加/移除，逻辑更简洁且可扩展（哪怕后续增加更多图片也无需修改核心代码）。

完整代码实现 #

HTML结构示例

<img class="picture" src="图片1地址" alt="图1">
<img class="picture" src="图片2地址" alt="图2">
<img class="picture" src="图片3地址" alt="图3">

JavaScript逻辑

// 获取所有图片元素
const pictures = document.querySelectorAll('.picture');

// 为每张图片绑定点击事件
pictures.forEach(pic => {
  pic.addEventListener('click', function() {
    // 判断当前点击的图片是否处于激活状态
    const isCurrentlyOpened = this.classList.contains('opened');

    // 第一步：重置所有图片的类（清空所有状态）
    pictures.forEach(item => {
      item.classList.remove('opened', 'moveToBottom');
    });

    // 第二步：根据当前状态处理
    if (!isCurrentlyOpened) {
      // 给当前点击的图片添加激活类
      this.classList.add('opened');
      // 给其他图片添加移至底部的类
      pictures.forEach(item => {
        if (item !== this) {
          item.classList.add('moveToBottom');
        }
      });
    }
    // 若当前图片已激活，重置后直接恢复原状，无需额外操作
  });
});

逻辑说明 #

1. 统一重置：每次点击先清空所有图片的opened和moveToBottom类，避免状态残留导致的逻辑混乱；
2. 单条件判断：仅需判断当前点击的图片是否已激活，即可决定后续是添加状态还是保持重置后的初始状态；
3. 批量处理：用forEach遍历所有图片，替代原来针对每张图片的单独判断，彻底消除重复代码。

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