爲所有具有相同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()指錘對象，而不是當前對象。