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');
});

如果这不起作用，您可能需要在每个项目上添加一个滑块。

Javascript循环遍历getElementsByClassName

1 个答案: