我想从第一个元素中删除 class，同时使用 JavaScript 添加其他元素

Question

我有四个带图像的 div，我想在面板上单击时添加一个 class .open，然后从最后一个 [=23= 中删除这个 class ] 当点击另一个 div.

 <div class="panel panel1">
    image..
  </div>
  <div class="panel panel2">
    image..
  </div>
  <div class="panel panel3">
    image..
  </div>
  <div class="panel panel4">
    image..
  </div>
  <div class="panel panel5">
    image..
  </div>

当我们添加打开 class 列表时，这个图像容器增长了 5 倍，所以我想在单击其他图像容器时删除这个 class:

.panel.open {
    font-size: 40px;
    flex: 5;
  }



  const panel = document.querySelectorAll(".panel");
  function toggleOpen() {
    this.classList.toggle("open");
  }

  function toggelActive() {
    this.classList.add("open-active");
  }

  panel.forEach((panel) => panel.addEventListener("click", toggleOpen));
  panel.forEach((panel) => panel.addEventListener("transitionend", toggelActive));

Answer 1

当您使用 querySelectorAll 时，您将得到一个 NodeList，您可以通过索引访问元素并更改它们。

const divs = document.querySelectorAll("div");

console.log(divs[divs.length - 1]);

divs[divs.length - 1].classList.add("active");

.active {
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>

  <script src="./script.js"></script>
</body>
</html>

如果你把你要实现的逻辑描述的再详细点，也许我能帮你更好。

记住要访问索引为 0 的第一个元素

Answer 2

您可以使用 for 循环遍历所有面板删除 'open' class 然后将其添加到单击的面板：

const panel = document.querySelectorAll(".panel");

function toggleOpen() {
  // For loop
  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("open");
  }
  this.classList.add("open");
}

function toggelActive() {
  this.classList.add("open-active");
}

panel.forEach((panel) => panel.addEventListener("click", toggleOpen));
panel.forEach((panel) => panel.addEventListener("transitionend", toggelActive));

<div class="panel panel1">
    image..
  </div>
  <div class="panel panel2">
    image..
  </div>
  <div class="panel panel3">
    image..
  </div>
  <div class="panel panel4">
    image..
  </div>
  <div class="panel panel5">
    image..
  </div>

Answer 3

我想你可以给我们更多的细节，但如果你只是想在打开另一个图像时关闭一个图像，你可以从你的面板中删除所有“打开”类，比如：

const panel = document.querySelectorAll(".panel");
function toggleOpen(element) {
  element.classList.toggle("open");
}

function toggelActive(element) {
  element.classList.add("open-active");
}

/**
 * Remove all open classes from your panel
 */
function removeAll() {
  panel.forEach((panel) => {
    panel.classList.remove("open", "open-active")
  })
}

panel.forEach((panel) => panel.addEventListener("click", event => {
  /* First remove all classes */
  removeAll();
  toggleOpen(event.target)
}));
panel.forEach((panel) => panel.addEventListener("transitionend", event => {
  /* First remove all classes */
  removeAll();
  toggelActive(event.target)
}));

我想从第一个元素中删除 class，同时使用 JavaScript 添加其他元素

I want to remove class from first element while adding in other element using JavaScript

javascript

event-listener

dom-events