Javascript遍歷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>

js：

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內的recog元件

---

更新資料

如果您只希望一次滑動1個項目，請這樣做

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

---

更新2

如果只想要刷卡的物品，您應該可以這樣做，但這取決於錘子如何將目標向前傳遞。

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

如果這不起作用，則可能需要在每個項目上添加一個刷卡器。