为所有具有相同ID的元素初始化Hammer.js

Question

我想用锤子js为喜欢的帖子构建双Tab选项。 HTML：

<div class="gitem-wrap row"> 
     <div class="gitem"> 
     <div class="well"> 
      <figure id="img-item"><img src="images/2.jpg" class="img-responsive"></figure> 
      <article> 
       ... 
      </article> 
     </div> 
     </div> 
     <div class="gitem"> 
     <div class="well"> 
      <figure id="img-item"><img src="images/2.jpg" class="img-responsive"></figure> 
      <article> 
       ... 
      </article> 
     </div> 
     </div> 
</div> 

JS来初始化锤JS：

var myElement = document.getElementById('img-item'); 
var mc = new Hammer(myElement); 
mc.on("doubletap", function() { 
    //myElement.toggleClass('liked'); 
    console.log('Double tap!'); 
    return false; 
    }); 

它只是为第一要素，但并不适用于所有的工作。
如何初始化具有相同ID的所有元素的Hammer js？

的jsfiddle：http://jsfiddle.net/ekdfokc5/

感谢您的帮助。它的工作很棒hammer.js v1
http://jsfiddle.net/ekdfokc5/3
但在新版本（2.0.4）有问题，并且$('figured').toggleClass('liked')在重叠后不起作用。
http://jsfiddle.net/ekdfokc5/4

Answer 1

重复的ID被认为是无效的（而不是一个好的做法）。 ID应该是唯一的。使用类/ TagName等不同的方法。

MDN source : Element.id：它必须是唯一的

$('figure').each(function(){ //tagname based selector 
    var mc = new Hammer(this); 
    mc.on("doubletap", function() { 
     console.log('Double tap!'); 
     alert('Double tap!'); 
     //$(myElement).toggleClass('liked'); 
     return false; 
    }); 
}); 

Updated Fiddle

_{提供了一个jQuery的解决方案为您所标记的jQuery}

另外一个文档中，通过代替重复的ID类，并使用基于类的选择器。

<figure class="img-item"> 

---

$('.img-item').each(function(){ 
    var $this = $(this); 
    var mc = new Hammer(this); 
    mc.on("doubletap", function() { 
     console.log('Double tap!'); 
     alert('Double tap!'); 
     $this.toggleClass('liked'); 
     return false; 
    }); 
}); 

与$(this).toggleClass('..')小提琴没有工作，因为this内on()指锤对象，而不是当前对象。