@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 интересует
  • Вопрос задан
  • 162 просмотра
Решения вопроса 1
loktionov129
@loktionov129
Full Stack Developer
Пригласить эксперта
Ответы на вопрос 1
KorniloFF
@KorniloFF
I'm the BEST jQueryLESS
<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>
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
KUPIBILET.RU Санкт-Петербург
от 100 000 до 130 000 руб.
Grabr Inc. Москва
от 2 500 до 4 500 usd.
21 июля 2018, в 18:06
10000 руб./за проект
21 июля 2018, в 15:32
1000 руб./за проект