По клику на див сменить цвет другого дива (см. описание)?

Question

[myaca]

https://jsfiddle.net/vhyL55hL/

хочу по клику на один из дивов сверху (которые вложены в .controls), чтобы добавлялся к соответствующему диву снизу класс .active. (т.е. при клике на "1" сверху добавляется класс к "1" снизу)
Для каждого отдельного дива сверху писать обработчик не хочу, как тогда сделать можно? каким методом? js/jq без разницы

Comments

[Александр Лысенко]

Совсем недавно тут разбирался похожий вопрос, вот один из вариантов его решения. Изучите, вам поможет

[myaca]

AlexanderZe: нет, там другое ведь, там дочерние элементы показываются/скрываются, это я понимаю как сделать.
В моем примере они находятся на разных уровнях вложенности

[Александр Лысенко]

myaca: Объясните, чем эта структура:

tabs
-----tabs__group
----------tabs__item
-----tabs__content
----------tabs__content-item

Отличается от вашей

div
-----controls
----------div
-----change-it
----------div

[myaca]

AlexanderZe: черт. Правда, ничем. Очень-очень плохо посмотрел, извините. Спасибо за ответ, это то что нужно.

Answer 1

[Александр]

$('.controls>div').click(function(){
	var index = $('.controls>div').index(this);
  $('.change-it>div').eq(index).toggleClass('active');
});

https://jsfiddle.net/9h85c1j1/

Answer 2

[Игорь Перегудов]

Начнешь примерно так:

for(var i = 0; i < $('.controls > div').length; i++){
    $($('.controls > div')[i]).attr('data-id', i);
}

затем вешаешь обработчик на див и и добавляешь класс к другому диву с таким же data-id

Comments

[myaca]

а я вот думал про атрибут дата, но не был уверен, что это хорошее решение

[Игорь Перегудов]

myaca: js-ом расставляешь дата атрибуты просто, и будет масштабируемо