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

我基本上需要同时执行相同的功能。将有效移至图标 - 内容图片父级。找到第一个对象然后转到父节点并转到每个索引（默认情况下是第一个）。 node.parentNode.childNodes;是我发现的一件事......我会不断更新。没有要求这样做，而是更多我从我添加的代码中遗漏的内容。特别是第一部分。来自一个菜鸟EcsMaScript /现代香草人。

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

}

点击以使用Javascript / ES6

1 个答案: