Есть код:
div class="item first" div class="item two"div class="message first"
div class="message two"
Нужно что бы при клике на item с классом second выводилось сообщение second, то есть second становился бы активным. Как это сделать?
Есть код:
div class="item first" div class="item two"div class="message first"
div class="message two"
Нужно что бы при клике на item с классом second выводилось сообщение second, то есть second становился бы активным. Как это сделать?
Не удобно, что именно классами вы помечаете связь item - message. Т.к. могут быть и другие классы, может возникнуть путаница, какой из них считать признаком, а который там просто для оформления. Лучше для этого задействовать data-атрибуты.
А дальше вот этот скрипт:
function onClick() { let otherClass = ''; for (let i = 0; i < this.classList.length; i ) { let className = this.classList[i]; if (-1 !== ['item','active'].indexOf(className)) continue; otherClass = className; break; } if (otherClass.length === 0) return; document.querySelectorAll('.message.' otherClass).forEach(el => { el.classList.add('active'); }); }document.querySelectorAll('.item').forEach(el => {
el.addEventListener('click', onClick)
});
Следите за кликом по .item, в клике получаете второй класс кликнутого элемента (например three), производите поиск элемента по селектору .message.three, если нашли, то находите все .message.active и удаляете у них класс active, после чего найденному элементу .message.three добавляете ему в classList класс active.