为具有相同 id 的所有元素初始化 Hammer.js
initialize Hammer.js for all elements with same id
我想用 hammer js 为 like post 构建一个双 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 初始化 Hammer 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
重复的 ID 被视为无效(这不是一个好的做法)。 ID 应该是唯一的。使用不同的方法,例如 class/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;
});
});
提供一个 jQuery 解决方案,因为您已标记 jQuery
或者,将重复的 ID 替换为 class,并使用基于 class 的选择器。
<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;
});
});
fiddle 和 $(this).toggleClass('..')
不起作用,因为 on()
中的 this
指的是锤子对象而不是当前对象。
我想用 hammer js 为 like post 构建一个双 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 初始化 Hammer 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
重复的 ID 被视为无效(这不是一个好的做法)。 ID 应该是唯一的。使用不同的方法,例如 class/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;
});
});
提供一个 jQuery 解决方案,因为您已标记 jQuery
或者,将重复的 ID 替换为 class,并使用基于 class 的选择器。
<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;
});
});
fiddle 和 $(this).toggleClass('..')
不起作用,因为 on()
中的 this
指的是锤子对象而不是当前对象。