如果其中一个元素在单击时获得相同的类，则向所有同级元素添加一个类？

Question

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    image.classList.add("select");
  });
});

.img_items::after{
  content: ' ' attr(class)
}

<div class="img_container">
  <div class="img_items ">1</div>
  <div class="img_items ">2</div>
  <div class="img_items">3</div>
  <div class="img_items">4</div>
</div>

我尝试在项目单击事件中将类添加到变量（图像）本身，但它没有将类添加到同级项目。

images.classList.add("select")

我们如何实现这一目标？

Answer 1

在循环中将类添加到每个元素，就像添加事件监听器一样。

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    images.forEach(image => image.classList.add("select"));
  });
});

.img_items::after {
  content: ' ' attr(class)
}

<div class="img_container">
  <div class="img_items ">1</div>
  <div class="img_items ">2</div>
  <div class="img_items">3</div>
  <div class="img_items">4</div>
</div>

如果你只想对同一个

.img_container

中的兄弟姐妹做，你可以使用DOM导航先选择它们并循环它们，而不是循环所有

images

.

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    let siblings = image.parentElement.querySelectorAll(".img_items");
    siblings.forEach(image => image.classList.add("select"));
  });
});

.img_items::after {
  content: ' ' attr(class)
}

<div class="img_container">
  <div class="img_items ">1</div>
  <div class="img_items ">2</div>
  <div class="img_items">3</div>
  <div class="img_items">4</div>
</div>
<hr>
<div class="img_container">
  <div class="img_items ">5</div>
  <div class="img_items ">6</div>
  <div class="img_items">7</div>
  <div class="img_items">8</div>
</div>

Answer 2

首先，解释为什么你没有得到预期的行为：

您的代码正在做的是遍历所有具有

img_items

类的元素，并为每个元素附加一个

click

eventListener

。

该事件侦听器获取所选图像并将类

select

添加到仅该图像.

本质上，您的代码等同于以下内容：

images[0].addEventListener("click", () => {
    image[0].classList.add("select");
});

images[1].addEventListener("click", () => {
    image[1].classList.add("select");
});

images[2].addEventListener("click", () => {
    image[2].classList.add("select");
});

images[3].addEventListener("click", () => {
    image[3].classList.add("select");
});

所以你只是改变了所选元素的

classlist

。

因此，您需要在

eventListener

中再次遍历元素，如下所示：

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    images.forEach((image) => {
      image.classList.add("select");
    })
  });
});

<div class="img_container">
  <div class="img_items ">img1</div>
  <div class="img_items ">img2</div>
  <div class="img_items">img3</div>
  <div class="img_items">img4</div>
</div>