Изменить фон элемента при нажатии на другой элемент
Я пытаюсь написать код на HTML-странице, на которой есть таблица значений. Я хочу, чтобы щелчок по любой строке таблицы менял цвет фона другого элемента, по сути, просто поля, чтобы выделить его среди других полей. Я относительно новичок в JS, HTML, CSS, поэтому еще не совсем освоил их.
Хорошо, я получил щелчок по строке, чтобы изменить цвет поля, но с парой проблем. Работает только первая строка таблицы, и она не возвращается к исходной после того, как я ее «откликаю».
Кто-нибудь может помочь? Заранее спасибо.
код, который у меня есть на данный момент, таков:
<style>
#row{
position:relative;
}
#sensor{
width:30px;
height:22px;
margin: 0 0 -15px 0;
background-size:100%;
background: white;
background-repeat:no-repeat;
overflow:hidden;
border: 1px solid black;
position:absolute;
left: 70px; top: 100px;
z-index: 1;
}
#sensor.clicked {background: greenyellow}
</style>
<div>
<table>
<tbody>
<tr id = "row">
<td> various table rows </td>
</tr>
</tbody>
</table>
</div>
$('#row').on('click', function () {
$("#sensor").addClass('clicked');
});
<div>
<div id = "sensor">CON</div>
</div>
«Работает только первая строка таблицы», у вас есть несколько строк с одинаковым идентификатором? Идентификаторы должны быть уникальными в HTML. Используйте классы, если вам нужно повторно использовать селектор.
Я только что обновил его, идентификатор датчика — это просто поле, в котором я хочу изменить фон.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы учитесь программировать и манипулировать DOM, постарайтесь не полагаться на jQuery. Вот схема решения на чистом JavaScript, которое будет работать во всех современных веб-браузерах.
Метод document.getElementById получает ссылку на элемент таблицы HTML, используя его уникальный идентификатор.
Метод addEventListener используется для присоединения функции-обработчика для обработки click событий в таблице.
В функции-обработчике есть защита, проверяющая, имеет ли щелчок элемента класс sensor, прежде чем переключать класс clicked на элементе.
const tableHandle = document.getElementById("table-id");
tableHandle.addEventListener("click", function(event){
if (event.target.classList.contains("sensor")) {
event.target.classList.toggle("clicked");
}
});.row {
position: relative;
}
.sensor {
width: 30px;
height: 22px;
margin: 0 0 -15px 0;
background-size: 100%;
background-color: blue;
background-repeat: no-repeat;
overflow: hidden;
border: 1px solid black;
left: 70px;
top: 100px;
z-index: 1;
}
.sensor.clicked {
background: greenyellow;
}<div>
<table id = "table-id">
<tbody>
<tr class = "row">
<td class = "sensor"> various table rows </td>
<td class = "sensor"> various table rows </td>
<td class = "sensor"> various table rows </td>
</tr>
<tr class = "row">
<td class = "sensor"> various table rows </td>
<td class = "sensor"> various table rows </td>
<td class = "sensor"> various table rows </td>
</tr>
<tr class = "row">
<td class = "sensor"> various table rows </td>
<td class = "sensor"> various table rows </td>
<td class = "sensor"> various table rows </td>
</tr>
</tbody>
</table>
</div> Если вы настаиваете на использовании jQuery, следующий фрагмент будет работать вместо кода JavaScript.
$(".sensor").on("click", function () {
$(this).toggleClass("clicked");
});
В следующем примере используется прослушиватель делегированных событий, привязанный к родительской таблице ( id='womble' ), для перехвата click событий, которые происходят внутри нее и ее дочерних элементов.
Из-за распространения событий вы можете проверить event, чтобы найти элемент, для которого изначально было вызвано событие, и сделать вывод, является ли это строкой таблицы или ячейкой таблицы и т. д. Отсюда вы можете легко переключить желаемое изменение класса для элемента с идентификатором sensor
Если в таблице более одной строки, вам нужно будет использовать атрибут class='row' вместо идентификатора или, альтернативно, использовать атрибут dataset, например data-id='row', который является допустимым.
Обратите внимание, что двойной щелчок по одной и той же ячейке приведет к переключению как класса датчика, так и самой ячейки, тогда как щелчок по отдельным ячейкам переключит только класс датчика.
const tbl = document.getElementById('womble');
const div = document.getElementById('sensor');
tbl.addEventListener('click', e => {
const item = e.target;
if (item instanceof HTMLTableRowElement || item instanceof HTMLTableCellElement) {
div.classList.toggle('clicked');
item.classList.toggle('active');
}
});table,
td {
border: 1px solid grey;
border-collapse: all;
}
td {
padding: 0.25rem;
cursor: pointer;
border: 1px dashed grey;
background: white;
transition: ease-in-out all 250ms;
}
#sensor {
width: 30px;
height: 22px;
margin: 0 0 -15px 0;
background-size: 100%;
background: white;
background-repeat: no-repeat;
overflow: hidden;
border: 1px solid black;
position: absolute;
left: 70px;
top: 100px;
z-index: 1;
transition: ease-in-out all 250ms;
}
#sensor.clicked {
background: greenyellow
}
td.active {
background: rgba(0, 255, 0, 0.1)
}<table id='womble'><!-- name / id chosen at random -->
<tbody>
<tr class = "row">
<td> various table rows </td>
<td> more table data </td>
</tr>
<tr class = "row">
<td> various table rows </td>
<td> and some more data </td>
</tr>
</tbody>
</table>
<div id='sensor'></div>
Где находится элемент с идентификатором
sensor? (И если вы хотите, чтобы он переключался, а не просто добавлялся, вам понадобится: api.jquery.com/toggleclass )