Пытаюсь переписать код с jQuery на ванильный JS. При клике на элемент коллекции должен добавляться класс 'active', а при клике на другой элемент класс 'active' должен передаться другому.
Код:
<tbody id="body_table">
<tr class="row" data-id="1">
<td class="name ">Смородина Алена</td>
</tr>
<tr class="row " data-id="2">
<td class="name">Коновалов Александр</td>
</tr>
<tr class="row " data-id="3">
<td class="name">Зайченко Валентина</td>
</tr>
</tbody>
На jQuery это примерно так
$(document).ready(() => {
$('.row').click((event) => {
const userId = event.currentTarget.getAttribute('data-id');
setActiveRow(event.currentTarget);
})
});
function setActiveRow(el) {
$('.row').removeClass('active');
$(el).addClass('active');
}
А на чистом достиг такого результата. Класс 'active' навешивается и убирается только с одного элемента, индекс которого прописан.
function learnUserId() {
for (var i = 0; i < row.length; i++) {
row[i].addEventListener('click', function () {
const userId = event.currentTarget.getAttribute('data-id');
setActiveRow(event.currentTarget)
});
}
}
function setActiveRow(el) {
if (row[1].classList.contains('active') == true) {
el.classList.remove('active');
} else {
el.classList.add('active')
}
}
Помогите разобраться как правильно сделать. Спасибо!