@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 интересует
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 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
Похожие вопросы