基于Vanilla/ES6重构jQuery版Game Gallery的DOM操作问题

嘿，我之前重构类似的jQuery组件时也踩过这些坑，给你一步步拆解解决方案～

核心问题1：点击时正确定位父元素的子元素 #

jQuery里的$(this).parent().find('.child')这类链式操作，在原生JS里可以通过closest()+querySelector组合实现：

• 用event.currentTarget.closest('.parent-class')精准找到当前点击元素的父容器（比parentElement更灵活，能跨多层嵌套）
• 再用父容器的querySelector('.child-class')定位子元素

核心问题2：获取对应索引实现同步操作 #

替代jQuery的.eq($(this).parent().index())，原生JS可以这么做：

1. 先把所有父容器的NodeList转成数组（Array.from()）
2. 用indexOf()找到当前父容器在数组中的索引
3. 用这个索引同步操作图片区和文案区的对应元素

解决for循环中所有图标保持激活的问题 #

这个坑通常是闭包变量泄漏或者没有先全局移除active类导致的：

• 用forEach遍历（自带索引参数，且是块级作用域）替代传统var的for循环
• 每次点击时，先移除所有元素的active类，再给当前元素添加，避免多个元素同时激活

完整代码示例 #

假设你的DOM结构大概是这样：

<div class="gallery">
  <div class="gallery-item">
    <span class="icon">图标1</span>
  </div>
  <div class="gallery-item">
    <span class="icon">图标2</span>
  </div>
</div>
<div class="image-slides">
  <div class="image-slide">图片1</div>
  <div class="image-slide">图片2</div>
</div>
<div class="text-slides">
  <div class="text-slide">文案1</div>
  <div class="text-slide">文案2</div>
</div>

对应的ES6代码：

// 缓存所有需要操作的元素（只查询一次，提升性能）
const galleryItems = document.querySelectorAll('.gallery-item');
const imageSlides = document.querySelectorAll('.image-slide');
const textSlides = document.querySelectorAll('.text-slide');

// 给每个画廊项绑定点击事件
galleryItems.forEach((item, currentIndex) => {
  item.addEventListener('click', () => {
    // 1. 移除所有元素的active类
    galleryItems.forEach(el => el.classList.remove('active'));
    imageSlides.forEach(el => el.classList.remove('active'));
    textSlides.forEach(el => el.classList.remove('active'));

    // 2. 给当前点击的项添加active
    item.classList.add('active');
    // 3. 根据索引同步图片和文案
    imageSlides[currentIndex].classList.add('active');
    textSlides[currentIndex].classList.add('active');
  });
});

如果是点击图标（.icon）触发，调整下事件绑定逻辑即可：

const icons = document.querySelectorAll('.gallery-item .icon');

icons.forEach(icon => {
  icon.addEventListener('click', (e) => {
    // 找到父容器
    const parentItem = e.currentTarget.closest('.gallery-item');
    // 获取父容器的索引
    const itemIndex = Array.from(galleryItems).indexOf(parentItem);

    // 重复上面的移除+添加active逻辑
    galleryItems.forEach(el => el.classList.remove('active'));
    imageSlides.forEach(el => el.classList.remove('active'));
    textSlides.forEach(el => el.classList.remove('active'));

    parentItem.classList.add('active');
    imageSlides[itemIndex].classList.add('active');
    textSlides[itemIndex].classList.add('active');
  });
});

关键注意点 #

• 缓存DOM元素：避免每次事件触发都重新查询DOM，提升性能
• 块级作用域：用forEach或let声明的循环变量，解决传统var导致的索引错误
• 先清后加：操作active类时先全局移除，再给目标元素添加，确保只有一个激活项

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