Асинхроность между двумя дивами на js?

Question

[DeniSidorenko]

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

<div class="wrapper1">
  <div class="wrapper1-item active"></div>
  <div class="wrapper1-item"></div>
  <div class="wrapper1-item"></div>
  <div class="wrapper1-item"></div>
  <div class="wrapper1-item"></div>
</div>

<div class="wrapper2">
  <div class="wrapper2-item active"></div>
  <div class="wrapper2-item"></div>
  <div class="wrapper2-item"></div>
  <div class="wrapper2-item"></div>
  <div class="wrapper2-item"></div>
</div>

Как сделать что бы при клике по элементу из wrapper1 элемент который находиться в точно такой же позиции по индексу из wrapper 2 получил класс active А у остальных удалялось, ибо только 2 могут иметь класс active

Только чистый JS интересует

Answer 1

[Alex Ander]

https://jsfiddle.net/v6pw77vh/

Comments

[DeniSidorenko]

Алексей спасибо за замечательное решение, только не могли бы подсказать как сделать если к примеру при клике, не идет клик на wrapper а иногда на его дочерние элементы

[Андрей Гуртовой]

DeniSidorenko, не удалось понять что вы имеете в виду, но похоже вы про e.preventDefault();
который нужно добавить между первой и второй строчкой.

Answer 2

[Павел Корнилов]

<div class="wrapper1">
	<div class="wrapper1-item active">1</div>
	<div class="wrapper1-item">2</div>
	<div class="wrapper1-item">3</div>
	<div class="wrapper1-item">4</div>
	<div class="wrapper1-item">5</div>
</div>

<div class="wrapper2">
	<div class="wrapper1-item active">1</div>
	<div class="wrapper1-item">2</div>
	<div class="wrapper1-item">3</div>
	<div class="wrapper1-item">4</div>
	<div class="wrapper1-item">5</div>
</div>

<script>
	'use strict';
var w1 = document.querySelector('.wrapper1'),
	w2 = document.querySelector('.wrapper2');
[].forEach.call(w1.children, function(i,ind) {
	i.ind = ind;
});
[].forEach.call(w2.children, function(i,ind) {
	i.ind = ind;
});
w1.addEventListener('click', function (e) {
	var t = e.target;
	if(t.ind === undefined) return;
	[].forEach.call(w2.children, function(i) {
		i.classList.remove('active');
	});
	w2.children[t.ind].classList.add('active');
});
</script>