有没有办法使用javaScript选择父级为类（“seat”）的类（“btn”）的所有元素并更改其背景颜色？

Question

我正在尝试实施公交车座位布局。我希望座位在单击时更改其背景颜色。座位是带有 class='seat' 的引导单选按钮和带有 class='btn' 的标签。

我尝试编写 JavaScript 代码，但我似乎没有获得 .style 属性，vs 代码自动完成不同的属性。这是我的 JavaScript 代码的一部分：

document.addEventListener('DOMContentLoaded',()=>{
    document.querySelectorAll('.seat .btn').forEach(seat=>{
        seat.addEventListener('click',()=>{
            seat.computedStyleMap
        })
    })
})

座椅元件：

<div class="col-3 col-sm-3 seat px-1 justify-content-end d-flex">
   <input type="radio" class="btn-check mx-1" name="seat" id="C1">
   <label class="btn" for="C1"><i class="bi bi-layout-sidebar-inset-reverse"></i>C1</label>
</div>

我尝试过 document.querySelector(".seat > .btn").forEach... 我仍然得到相同的自动完成，即“seat.compulatedStyleMap”。我期待有“seat.style.backgroundColor = red”。

Answer 1

只需使用CSS

[name=seat]:checked + label {
    background-color: green !important;
    color: white !important; 
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

<div class="col-3 col-sm-3 seat px-1 justify-content-end d-flex">
   <input type="radio" class="btn-check mx-1" name="seat" id="C1">
   <label class="btn" for="C1"><i class="bi bi-layout-sidebar-inset-reverse"></i>C1</label>
   <input type="radio" class="btn-check mx-1" name="seat" id="C2">
   <label class="btn" for="C2"><i class="bi bi-layout-sidebar-inset-reverse"></i>C2</label>
</div>