Есть ли способ выбрать все элементы класса («btn»), родители которых относятся к классу («место»), используя javaScript, и изменить цвет фона?
Я пытаюсь реализовать расположение сидений в автобусе. Я хочу, чтобы сиденья меняли цвет фона при нажатии. Места представляют собой переключатели начальной загрузки с class='seat' и метками с class='btn'.
Я пытался написать код JavaScript, но, похоже, не получил атрибут .style, а не автозаполнение кода - другой атрибут. Вот часть моего 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.computedStyleMap". Я ожидал получить «seat.style.backgroundColor = red».
Селектор .seat .btn выбирает элементы «btn», а не элементы «seat».
@Дэвид, я пытался написать, но как только я пишу .style.backgr... он сразу переходит к автозаполнению. Поэтому я подумал, что, возможно, есть проблема с тем, как я выбираю элемент.
@Pointy, спасибо за ваш комментарий. Проблема в том, что у меня есть другие элементы класса btn, на которые это событие не должно влиять; Мне нужны только btns, которые являются детьми места(ов).
@Balup: То есть вы описываете проблему с VS Code, а не с JavaScript? И вы утверждаете, что VS Code каким-то образом мешает вам закончить эту строку кода? Пожалуйста, обновите вопрос, чтобы уточнить проблему, которую вы пытаетесь описать. В настоящее время кажется, что вы спрашиваете о чем-то в самом коде, что вводит в заблуждение.
@Дэвид Спасибо за ваш комментарий. Моя основная цель — стилизовать сиденья с помощью JS; Я не думал, что код VS неисправен, я думал, что причина в моем коде. Это похоже на попытку добавить обязательный атрибут в элемент h1; поэтому мой вопрос основан на том, как выбрать элемент. Если вы по-прежнему считаете, что вопрос вводит в заблуждение, я изменю его как можно скорее, сэр.
Ответы 2
Просто используйте 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>Вам необходимо выбрать элементы метки напрямую, поскольку они имеют класс btn. Кроме того, вам следует использовать свойство style для изменения цвета фона.
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.seat .btn').forEach(seat => {
seat.addEventListener('click', () => {
// Toggle the background color of the clicked seat
if (seat.style.backgroundColor === 'red') {
seat.style.backgroundColor = ''; // Reset to default
} else {
seat.style.backgroundColor = 'red'; // Change to red
}
});
});
});
<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>
Это проблема JavaScript или проблема VS Code? Что происходит, когда вы пишете код, который хотите написать, независимо от предложений автозаполнения?