How to select elements by class name in hammer.js?

Question

I'm trying to use hammer.js and select elements using their class name as opposed to thier IDs.

However, my code seems to only selects the first element with the class name and ignores the rest with the same class name.

It doesn't also get the $(this).attr('id); for some reason!

Here is a working fiddle:

jsfiddle.net/cku6xap9/

If you swipe left on the first element, you see an undefined alert but nothing happens when you swipe left on other elements.

Can someone please advice on this issue?

Thanks in advance.

Answer 1

You have some errors:

• document.querySelector selects only one element. Use document.querySelectorAll instead

• You are declaring hammer globally instead of using one instance for each element

• In $(this).attr('id');, this is the context of hammer, not the HTML element

Try this:

$('.box').each(function(){
    var mc = new Hammer(this);
    mc.on("swipeleft", function(e) {
       var id = e.target.id;
       alert(id)
    });
});