@DeniSidorenko

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

Привет есть такая структура
<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 интересует
  • Вопрос задан
  • 169 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
<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>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы