Выборочное добавление класса через JS

117

27 августа 2019, 06:30

Есть аккордеон, пытаюсь добавить к нему стрелки состояния. При открытой вкладке ей присваивается класс active, далее пробую добавить класс, который перевернет изображение, но не понимаю как выловить именно эту открытую вкладку, поэтому изображения переворачиваются все.

PS перед всем этим так же через JS добавляется изображение, если это важно.

var welement = document.body.querySelectorAll(".toggler");//родитель 
var welementAdd = document.body.querySelectorAll(".toggler img");//добавленный ранее элемент 
 
for(var i=0; i<welement.length;i++){//вещаем клик на всех родителей 
    welement[i].addEventListener('click', selectAc); 
} 
function selectAc(){ 
    if(this.classList.contains('active')){//проверяем условие 
        for(var i=0; i<welementAdd.length;i++){ 
             welementAdd[i].classList.add('active-ac-img'); 
        } 
    }else { 
        for(var i=0; i<welementAdd.length;i++){ 
             welementAdd[i].classList.remove('active-ac-img'); 
        } 
    } 
}

.active-ac-img{ 
    transform: rotate(180deg); 
}

<div class="accordion-item"> 
    <div class="toggler"> 
        <img src="/images/arr.png" width="30" height="28"> 
    </div> 
</div> 
<div class="accordion-item"> 
    <div class="toggler"> 
        <img src="/images/arr.png" width="30" height="28"> 
    </div> 
</div> 
<div class="accordion-item"> 
    <div class="toggler"> 
        <img src="/images/arr.png" width="30" height="28"> 
    </div> 
</div>

Answer 1

// назначить обработчик click всем элементам .toggler 
document.body.querySelectorAll(".toggler").forEach( 
  toggler => toggler.addEventListener('click', selectAc)); 
 
function selectAc(){ 
  // убрать класс active-ac-img со всех картинок 
  document.body.querySelectorAll(".toggler img").forEach( 
    img => img.classList.remove('active-ac-img')); 
  // добавить класс active-ac-img к картинке щелкнутого элемента 
  this.querySelector("img").classList.add('active-ac-img'); 
}

.active-ac-img{ 
    transform: rotate(180deg); 
}

<div class="accordion-item"> 
    <div class="toggler"> 
        <img src="https://www.gstatic.com/webp/gallery3/1.png" width="50" height="50"> 
    </div> 
</div> 
<div class="accordion-item"> 
    <div class="toggler"> 
        <img src="https://www.gstatic.com/webp/gallery3/1.png" width="50" height="50"> 
    </div> 
</div> 
<div class="accordion-item"> 
    <div class="toggler"> 
        <img src="https://www.gstatic.com/webp/gallery3/1.png" width="50" height="50"> 
    </div> 
</div>