Javascript 如何将hammer.js绑定到多个ID

在一个页面上，我有几个引导转盘，我想让它们在刷卡上工作。为此，我使用

hammer.js

。将

hammer.js

绑定到一个元素不是问题，例如：

var swipeElement = document.getElementById('carousel');

  if (typeof(swipeElement) != 'undefined' && swipeElement != null) {
    var hammertime = new Hammer(swipeElement, {
      recognizers: [
        [Hammer.Swipe, {direction: Hammer.DIRECTION_HORIZONTAL}]
      ],
      cssProps: {
        userSelect: "", contentZooming: ""
      }
    });

    hammertime.on('swiperight', function () {
      $('.left.carousel-control').click();
    });

    hammertime.on('swipeleft', function () {
      $('.right.carousel-control').click();
    });

  }

这很有效。但是我有几个带id的转盘：

carousel_1

，

carousel_2

，等等。我如何初始化

hammer.js

，而不分别为每个id编写代码？谢谢

编辑：

我试着这么做：

  var swipeElements = document.getElementsByClassName('carousel-inner');
  for(var i = 0; i < swipeElements.length; i++) {
    if (typeof(swipeElements[i]) != 'undefined' && swipeElements[i] != null) {
      var elementId = document.getElementById(swipeElements[i].id);
      var hammertime = new Hammer(elementId, {
        recognizers: [
          [Hammer.Swipe, {direction: Hammer.DIRECTION_HORIZONTAL}]
        ],
        cssProps: {
          userSelect: "", contentZooming: ""
        }
      });

      hammertime.on('swiperight', function () {
          $(elementId).parent().children('.left.carousel-control').click();
      });

      hammertime.on('swipeleft', function () {
          $(elementId).parent().children('.right.carousel-control').click();
      });

    }
  }

用于：

它会触发我在页面上的所有旋转木马。如果我向右滑动，所有其他旋转木马也会向右滑动。我很困惑

---

编辑：出于某种原因，

$（elementId）

具有值

carousel_6

，但它被放入循环中，因此它必须具有从

carousel_0

到

carousel_6

的值，只需为每个包装使用一个不同的类，然后使用jQuery对其进行迭代即可

$('.carousel').each(function(i, el){
    // el is the actual DOM element
    // we save a jQuery wrapped version here in the closure so that
    // it is available to callbacks.
    var $el = $(el);
    var hammertime = new Hammer(el, {
      recognizers: [
        [Hammer.Swipe, {direction: Hammer.DIRECTION_HORIZONTAL}]
      ],
      cssProps: {
        userSelect: "", contentZooming: ""
      }
    });

    hammertime.on('swiperight', function () {
      $el.find('.left.carousel-control').click();
    });

    hammertime.on('swipeleft', function () {
      $el.find('.right.carousel-control').click();
    });
});

---

您的问题的解决方案如下。上面添加的代码对我不起作用

；（函数（$、窗口、文档）{
"严格使用",；
变量$sliders=$（'.carousel'）；
var-hammer=[]；
对于（变量i=0；i<$sliders.length；i++）{
变量滑块=$sliders[i]；
锤子[i]=新锤子（$sliders.get（i））；
$（滑块）。查找（'img'）。每个（（索引，元素）=>{
$（elem）.prop（'draggable'，false）；
});
$（滑块）.carousel（）；
$（滑块）。查找（“.carousel control prev”）。单击（（e）=>{
e、 预防默认值（）；
$（滑块）.carousel（“上一个”）；
});
$（滑块）。查找（“.carousel control next”）。单击（（e）=>{
e、 预防默认值（）；
$（滑块）.carousel（“下一步”）；
});
hammer[i].on（“左-右”，e）=>{
e、 预防默认值（）；
变量滑块=$（e.target）.closest（“.carousel”）；
if（e.type=='panleft'）$（滑块）.carousel（“下一步”）；
if（e.type=='panright'）$（滑块）.carousel（“prev”）；
});
$（滑块）。查找（'.carousel indicators li'）。单击（（e）=>{
$（滑块）.carousel（$（e.target）.data（'slide-to'）；
});
}
})（jQuery、窗口、文档）

document.querySelectorAll（“[选择器匹配所有元素]”），然后在该数组上执行

forEach

？执行：

var a=document.querySelectorAll（'div.carousel-inner.thumb-inner'）

然后

array.isArray（a）

给出

false

。那么，如何使用

forEach

？它返回一个NodeList，它也有

forEach

方法

hammertime.on('swipeleft', function () {
   $('.right.carousel-control').click();
});

$('.carousel').each(function(i, el){
    // el is the actual DOM element
    // we save a jQuery wrapped version here in the closure so that
    // it is available to callbacks.
    var $el = $(el);
    var hammertime = new Hammer(el, {
      recognizers: [
        [Hammer.Swipe, {direction: Hammer.DIRECTION_HORIZONTAL}]
      ],
      cssProps: {
        userSelect: "", contentZooming: ""
      }
    });

    hammertime.on('swiperight', function () {
      $el.find('.left.carousel-control').click();
    });

    hammertime.on('swipeleft', function () {
      $el.find('.right.carousel-control').click();
    });
});