Как сделать простой скрипт на js?

Question

[DeniSidorenko]

Привет есть такая структура

HTML КОД

<div class="item first"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>



<div class="message first"></div>
<div class="message two"></div>
<div class="message three"></div>
<div class="message four"></div>

Как сделать что бы при клике на item с классом three, div с классом message и с класомм three получал active

Answer 1

[Владимир Проскурин]

Следите за кликом по .item, в клике получаете второй класс кликнутого элемента (например three), производите поиск элемента по селектору .message.three, если нашли, то находите все .message.active и удаляете у них класс active, после чего найденному элементу .message.three добавляете ему в classList класс active.

Answer 2

[Сергей Соколов]

Не удобно, что именно классами вы помечаете связь item - message. Т.к. могут быть и другие классы, может возникнуть путаница, какой из них считать признаком, а который там просто для оформления. Лучше для этого задействовать data-атрибуты.

В нынешнем варианте надо по клику на .item искать в списке классов другой, не равный "item" – это идентификатор для поиска соотв. message. Про то, чтобы «гасить» другие с классом .active в вопросе нет, поэтому примерно так: