如何使用 DOM 将 css 类添加到嵌套元素？答案

【问题标题】：How can I add css class to the to the nested element using DOM?如何使用 DOM 将 css 类添加到嵌套元素？
【发布时间】：2022-02-12 23:09:49
【问题描述】：

我在容器 div 中有四个子 div，每个子 div 里面都有一个按钮、图像和文本。默认情况下，图片必须为blurry，文本必须为hidden。

当用户点击按钮时，按钮应该是hidden，图片和文字应该是clear和visible。

我正在尝试使用 for 循环从元素中添加或删除 CSS 类，但这根本不起作用...

let btns = document.querySelectorAll(".btn");
let images = document.querySelectorAll(".img");
let imgTexts = document.querySelectorAll(".img-text");

images.forEach((el) => el.classList.add("blur"));
imgTexts.forEach((el) => el.classList.add("hidden"));
for (let i = 0; i < btns; i++) {
  btns[i].addEventListener("click", function () {
    btns[i].classList.add("hidden");
  });
}

.blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
.hidden {
  display: none;
}

<div class="container">
      <div class="card">
        <button class="btn">Open the Gift</button>
        <img
          src=""
          alt="#" class="img">
        <p class="img-text">CONGRATULATIONS????</p>
      </div>
      <div class="card">
        <button class="btn">Open the Gift</button>
        <img
          src=""
          alt="#" class="img">
        <p class="img-text">CONGRATULATIONS????</p>
      </div>
      <div class="card">
        <button class="btn">Open the Gift</button>
        <img
          src=""
          alt="#" class="img">
        <p class="img-text">CONGRATULATIONS????</p>
      </div>
      <div class="card">
        <button class="btn">Open the Gift</button>
        <img
          src=""
          alt="#" class="img">
        <p class="img-text">CONGRATULATIONS????</p>
      </div>
    </div>

【问题讨论】：

i < btns - btns 是 DOM 节点的集合... -> i < btns.length
为什么要使用for 循环？为什么不只是另一个.forEach()？
当您清除了内容的公共容器后，您可能会利用Descendant combinators 和/或Child combinator 的优势，这将使代码更加简单。

标签： javascript html css dom

【解决方案1】：

for (let i = 0; i < btns; i++) {
  btns[i].addEventListener("click", function () {
    btns[i].classList.add("hidden");
  });
}

这里，在for循环的条件下，写“i

【讨论】：

【解决方案2】：

没有限制只能创建一个类。您可以创建多个类，然后根据需要添加和删除类。示例代码 HTML

<img class = "image imageHidden" src = alt = >
<button class = "button buttonHidden">Click me</button>

现在我同时创建了两个类，我可以在 javascript 中根据需要使用它们 CSS

.image {
visiblity: visible}
.imageHidden {
visibility: hidden}
.button {
visibility: visible}
.buttonHidden {
visibility: hidden}

现在我在 CSS 中使用它们，我可以在 javascript 中使用它们

document.querySelector(".button").addEventListener("click",function () {

document.querySelector("img").classList.add("image");
document.querySelector("button").classList.add("buttonHidden");});

此代码将隐藏按钮并显示您可以根据需要使用此方法的图像。

【讨论】：