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

所以我在Jquery中做了这个：

但是，我需要在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');
    };
  }

什么都没有…我还缺什么

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

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

---

我基本上需要一次完成相同的功能。删除活动的图标-内容图像父对象。找到第一个对象，然后转到父对象一侧，然后转到每个索引（默认情况下是第一个索引）.

node.parentNode.childNodes；

是我发现的一件事…我会不断更新。不是要求更新，而是我添加的代码中缺少的更多内容。特别是第一部分。来自noob EcsMaScript/Modern Vanilla guy。

而不是遍历节点层次结构来搜索要切换的元素，您可以简化通过指定目标对其进行优化。如果单击的节点的索引与预期目标不匹配，则此功能非常有用

您可以使用

data-

HTML属性。例如：

data target=“.xbox”

可以应用于您的

span.circle

元素，因为这是您要添加单击侦听器的内容

并将

数据目标中的类添加到您的目标中：


及


单击后，可以使用以下命令从元素中提取目标：
this.dataset
，并指定要查找的内容。在本例中，它是：
const target=this.dataset.target

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

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

一旦我们有了目标，我们就可以从目标的邻居中删除当前的
活动类

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'));

}

与其尝试遍历父对象和子对象，不如将要切换的目标添加为
数据-
属性。单击
span
时，从所有匹配的span中删除活动类，将其添加到目标，并对文本包装器和图像包装器执行相同的操作。属性！很好，让我试试看！atrri但是我没有想到这是个好主意谢谢！
+target+
很有意义，也很干净。没问题。很高兴我能帮上忙。
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'));

}