如何将 hammer.js 绑定到多个 id

Question

在一个页面上，我有几个 bootstrap 轮播，我希望它们可以滑动。为此，我使用 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();
      });

    }
  }

但还是无济于事。如果我替换：

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

用于：

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

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

编辑：出于某种原因 $(elementId) 具有值 carousel_6，但它被放入循环中，因此它必须具有来自 carousel_0 到 carousel_6

Answer 1

只需为每个包装器使用不同的 class，然后使用 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();
    });
});

Answer 2

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

; (function ($, window, document) {
    'use strict';
    var $sliders = $('.carousel');
    var hammer = [];
    for (var i = 0; i < $sliders.length; i++) {
        var slider = $sliders[i];
        hammer[i] = new Hammer($sliders.get(i));
        $(slider).find('img').each((index, elem) => {
            $(elem).prop('draggable', false);
        });
        $(slider).carousel();
        $(slider).find(".carousel-control-prev").click((e) => {
            e.preventDefault();
            $(slider).carousel("prev");
        });
        $(slider).find(".carousel-control-next").click((e) => {
            e.preventDefault();
            $(slider).carousel("next");
        });
        hammer[i].on("panleft panright", (e) => {            
            e.preventDefault();
            var slider = $(e.target).closest(".carousel");
            if (e.type == 'panleft') $(slider).carousel("next");
            if (e.type == 'panright') $(slider).carousel("prev");
        });
        $(slider).find('.carousel-indicators li').click((e) => {
            $(slider).carousel($(e.target).data('slide-to'));
        });
    }
})(jQuery, window, document);

如何将 hammer.js 绑定到多个 id

How to bind hammer.js to multiple ids

javascript

ruby-on-rails

hammer.js