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等。如何在不分别为每个ID编写代码的情况下初始化hammer.js？感谢。

编辑：

我试图这样做：

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

for：

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

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

编辑：由于某种原因，$(elementId)的值为carousel_6，但它被放入循环中，因此它必须包含从carousel_0到{的值{1}}

Answer 1

只需为每个包装器使用一个不同的类，然后使用jQuery迭代它。

ParameterService

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

2 个答案: