试图创建一个程序，如果你点击一个座位，只要它还没有被选中，这个座位的颜色就会变成青色.DOM问题

Question

尝试创建一个电影座位预订程序，如果您单击某个座位，只要该座位尚未选择，该座位的颜色就会变为青色。在我的html代码中，我有多个名称相同的类"seat"，在DOM中，我用querySelectorAll针对每个类，然后使用循环迭代每个类。我只是想不出正确的代码，如果该类没有"已占用"one_answers"座位"的类，那么点击后会将颜色变成"青色"。这是我的代码，我要在javascipt代码中添加什么才能使其工作？在我的js代码上添加了一个"what go here">

这是我尝试制作的程序的图片，下面的代码只是整个程序的一部分。非常感谢。https://gyazo.com/17024efae51aadd1c537999ce94706eb

html:

<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>

css：

.seat {
width: 15px;
height: 12px;
background-color: rgba(129, 129, 129, 0.527);
margin: 4px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}

js:

const seats = document.querySelectorAll('.seat');
for (let seat of seats) {
seat.addEventListener('click', function() {
if (!seat.classList.contains('occupied')) {
WHAT GOES HERE? (document.queryselector(seat).style.backgroundColor = 'cyan') DOES NOT WORK BUT THIS IS WHAT I AM TRYING TO DO
}
})
}

Answer 1

如果未被占用，则应将一个类添加到正在迭代的seat中。

如果occupied座椅已经是青色，则添加该类别：

seat.classList.add('occupied');

否则，为青色添加另一条规则——也许称之为selected——并添加该类：

seat.classList.add('cyan');

const seats = document.querySelectorAll('.seat');
for (let seat of seats) {
seat.addEventListener('click', function() {
if (!seat.classList.contains('occupied')) {
seat.classList.add('selected');
}
})
}

.seat {
width: 15px;
height: 12px;
background-color: rgba(129, 129, 129, 0.527);
margin: 4px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.occupied {
background-color: green;
}
.selected {
background-color: cyan;
}

<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>

您也可以使用JS直接在元素上设置属性，但使用CSS规则会更优雅。

seat.style.backgroundColor = 'cyan';