Question

[FYI：做一个Udemy教程挑战]

这是html。它显示2个骰子。如您所见，他们共享“骰子”类。然后每个骰子还具有自己的类，分别用于控制单个项目“ dice1”和“ dice2”。

<img src="dice-5.png" alt="Dice 1" class="dice dice1">
<img src="dice-5.png" alt="Dice 2" class="dice dice2">

这是所有这三个类的CSS，即“ dice”，“ dice1”，“ dice2”。如您所见，“ dice1”和“ dice2”类仅控制屏幕上的垂直位置。

.dice {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}

.dice1 {
    top: 260px;
}

.dice2 {
    top: 150px;
}

在这个骰子游戏开始时，两个骰子都不可见。为此，我使用Javascript通过以下代码控制显示。

document.querySelector('.dice').style.display = 'none';

由于某些原因，该选项仅适用于dice1。在dice2上不起作用。如果我添加一行额外的代码来指定类'dice2'，dice2也将消失。但是，选择类“骰子”应同时选择它们。为什么这不起作用？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Document方法querySelector（）返回其中的第一个元素 文件

使用querySelectorAll：

myArray.forEach { $0.isSelected =  testArray.map { $0.id }.contains($0.id) ? true : $0.isSelected  }

无法使用JavaScript与另一个元素共享一个CSS类的CSS元素

1 个答案: