Javascript loop over getElementsByClassName

Question

Я пытаюсь выполнить итерацию с помощью getElementsByClassName, но эффект, который я пытаюсь достичь, влияет на все элементы одновременно.

Как я могу заставить его работать 1 элемент за салфетки?

HTML:

<div id="recog" class="cr-wrap"> 
      <div id="slide"> 
       <div class="card item"><img src="mc.svg"></div> 
       <div class="card item"><img src="paypal.svg"></div> 
       <div class="card item"><img src="visa.svg"></div> 
      </div> 
     </div> 

ЯШ:

var wrap = document.getElementById('recog'); 
var swiper = new Hammer(wrap); 
swiper.on('swipeleft', function(){  
var items = document.getElementsByClassName('item');  
for (var i=0; i < items.length ; i++){ 
    items[i].classList.add('gone');  
} 
}); 

Answer 1

Может быть, это было бы лучше, используя querySelectorAll, где вы можете сузить список попаданий даже больше.

var wrap = document.getElementById('recog'); 
var swiper = new Hammer(wrap); 
swiper.on('swipeleft', function(){ 
    var items = wrap.querySelectorAll('.item'); 
    for (var i=0; i < items.length ; i++){ 
    items[i].classList.add('gone'); 
    } 
}); 

Следует отметить: При использовании wrap.querySelectorAll('.item');, он предназначаться только item «S внутри recog элемента

---

Update

Если вы хотите только один пункт за взмахом, сделать как это

var wrap = document.getElementById('recog'); 
var swiper = new Hammer(wrap); 
swiper.on('swipeleft', function(){ 
    var item = wrap.querySelector('.item'); 
    item.classList.add('gone'); 
}); 

---

Update 2

Если вы хотите только прокатывается деталь, вы должны быть в состоянии сделать так, но это зависит от того, как молотка передать цель вперед.

var wrap = document.getElementById('recog'); 
var swiper = new Hammer(wrap); 
swiper.on('swipeleft', function(e){ 
    e.target.classList.add('gone'); 
}); 

Если это не сработает, вероятно, вам потребуется добавить swiper для каждого элемента.