单击以使用 Javascript/ES6 更改内部子项和其他部分

Question

所以我在 Jquery 中做了这个： Game Gallery

但是我需要在 Vanilla/ES6 中对其进行更改，并且我对如何在点击时定位父母的孩子以及如何找到其他部分的索引 (.eq($(this).parent().index()) 感到困惑（在我的情况下是复制和图像部分） ：

我的试验是在做一个 for 循环，例如：

  const mode = document.querySelectorAll('.gamegallery span');
  for (let i = 0; i < mode.length; i++) {
    mode[i].onclick = function() {
      this.parentNode.classList.toggle('active');
    };
  }

但似乎我缺少让父级与图标保持同步的东西，因为它设置了.active，但在所有图标上保持.active。我试过了：

if {
  this.parentNode.classList.add('active');
} 
else {
  this.parentNode.classList.remove('active');
}

什么什么都不做……我还缺少什么？

最后还要更改不同的部分，例如我使用的内容/图像：

 $('.gamegallery .game-images img').eq($(this).parent().index()).addClass('active');
    });

我基本上需要同时执行相同的功能。将 active 移除到图标 - content-images 父级。找到第一个对象，然后转到父级并转到每个索引（默认为第一个）。 node.parentNode.childNodes; 是我发现的一件事……我会继续更新。不是要求这样做，而是我添加的代码中缺少的更多内容。特别是第一部分。来自 EcsMaScript/Modern Vanilla 的菜鸟。

Answer 1

您可以通过指定目标来简化它，而不是遍历节点层次结构来搜索要切换的元素。如果您单击的节点的索引与您的预期目标不匹配，这会派上用场。

Checkout this Fiddle for a Demo

您可以使用data- HTML 属性。例如：data-target=".xbox" 可以应用于您的 span.circle 元素，因为这是您添加点击监听器的对象。

<span class="circle" data-target=".xbox">

并将data-target 中的类添加到您的目标：

<div class="swiper-slide xbox"></div>

和

<img src=".." class="xbox">

点击时，您可以使用this.dataset 从元素中提取目标并指定您要查找的内容。在这种情况下是：const target = this.dataset.target。

通过从数据集中找到目标的选择器，我们可以找到带有选择器的元素：

const targets = document.querySelectorAll('.swipe-slider'+target+', .game-images '+target');

一旦我们有了目标，我们就可以从目标的邻居中删除当前的active 类。不过，在这种情况下，我只是将其从所有内容中删除。

document.querySelectorAll('.swiper-slide, .game-images img').forEach(el => el.classList.remove('active'));

然后我们添加活动类：

targets.forEach(target => target.classList.add('active');

现在：

function handleClick(e) {

  const target = this.dataset.target;
  const targets = document.querySelectorAll('.swiper-slide'+target+', .game-images '+target);

  document.querySelectorAll('.swiper-slide, .game-images img').forEach(el => el.classList.remove('active'));

  targets.forEach(target => target.classList.add('active'));

}