Как связать hammer.js с несколькими идентификаторами

Question

На странице У меня есть несколько каруселей бутстрапа, и я хочу, чтобы они работали на салфетки. Для этого я использую 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(); 
    }); 

    } 

Это работает. Но у меня есть несколько каруселей с идеями: carousel_1, carousel_2 и т. Д. Как я могу инициализировать hammer.js, не записывая код для каждого идентификатора отдельно? Благодарю.

EDIT:

Я пытался сделать это:

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

Это вызовет все мои карусели на этой странице. Если я прокручу направо, все остальные карусели тоже будут стрелять вправо. Я запутался ...

EDIT: по какой-то причине $(elementId) имеет значение carousel_6, но он помещается в петлю, поэтому он должен иметь значение от carousel_0 до carousel_6

Answer 1

Просто используйте отдельный класс для каждой обертки, а затем итерации через 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(); 
    }); 
});