Как сделать взаимосвязь между блоками?

Question

[badEd]

Сразу прошу прощения за странную формулировку. Не знал как назвать топик.

У меня есть код, допустим:

<div class="box-item">
<div class="item active">img...</div>
<div class="item">img...</div>
<div class="item">img...</div>

<span class="arrow left"></span>
<span class="arrow right"></span>
</div>
// другой блок
<div class="block-text">
<div class="item">текст</div>
<div class="item">текст</div>
<div class="item">текс</div>
</div>

box-item - это обычный слайдер. У какого item стоит класс active, тот и показывается. arrow - переключатели слайдера.

А теперь ближе к задаче. Мне нужно, при клике на стрелку (.arrow) чтобы в блоке block-text добавлялся класс active у item с той же очередностью, что и аналогичный класс у дочернего блока item у box-item.

Если в блоке box-item второй item имеет класс active, то в блоке block-text второй item должен иметь класс active.

Еще раз извиняюсь за невнятно расписанную задачу.

Answer 1

[Sergey Romanov]

Можно добавить новый атрибут и туда и туда. Например `daia-index="1"` и потом ссылаться на этот индекс для активации элемент.

Comments

[badEd]

я написал простенький код, который может бы и работал, если бы это был пхп.

$( ".arrow" ).click(function() {
	var activeNum = $('.box-item> .item.active').index();  //узнаем порядковый номер элемента
	$(".block-text > .item[data-index='activeNum'] ").show(300); //показываем элемент в другом блоке с атрибутом, как индекс у элемента

});

если вместо переменной activeNum вставить цифру, все срабатывает

[Kovalsky]

badEd,".block-text > .item[data-index='activeNum'] "
...замените на это:

`.block-text > .item[data-index='="${ activeNum }"]`

[Sergey Romanov]

badEd, ну так в чем проблема? вставьте туда индекс полученый.

[Sergey Romanov]

Никита Полевой, Ну или на '.block-text > .item[data-index="'+activeNum+'"]'

[badEd]

спасибо)