我正在尝试实施公交车座位布局。我希望座位在单击时更改其背景颜色。座位是带有 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”。
只需使用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>