I have a swipe detection function detectswipe(el, func)
that listens for data-animate="swipe"
and runs the function swipe(el, d)
when swiped on mobile. The problem is it only runs on the first instance of data-animate="swipe"
and not every instance.
How do I change my code to run on every instance of data-animate="swipe"
?
function detectswipe(el, func) { swipe_det = new Object(); swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0; var min_x = 30; //min x swipe for horizontal swipe var max_x = 30; //max x difference for vertical swipe var min_y = 50; //min y swipe for vertical swipe var max_y = 60; //max y difference for horizontal swipe var direc = ""; ele = document.querySelector(el); ele.addEventListener( "touchstart", function (e) { var t = e.touches[0]; swipe_det.sX = t.screenX; swipe_det.sY = t.screenY; }, false ); ele.addEventListener( "touchmove", function (e) { e.preventDefault(); var t = e.touches[0]; swipe_det.eX = t.screenX; swipe_det.eY = t.screenY; }, false ); ele.addEventListener( "touchend", function (e) { //horizontal detection if ( (swipe_det.eX - min_x > swipe_det.sX || swipe_det.eX + min_x < swipe_det.sX) && swipe_det.eY < swipe_det.sY + max_y && swipe_det.sY > swipe_det.eY - max_y ) { if (swipe_det.eX > swipe_det.sX) direc = "r"; else direc = "l"; } //vertical detection if ( (swipe_det.eY - min_y > swipe_det.sY || swipe_det.eY + min_y < swipe_det.sY) && swipe_det.eX < swipe_det.sX + max_x && swipe_det.sX > swipe_det.eX - max_x ) { if (swipe_det.eY > swipe_det.sY) direc = "d"; else direc = "u"; } if (direc != "") { if (typeof func == "function") func(el, direc); } direc = ""; }, false ); } function swipe(el, d) { $(el).addClass("active"); } detectswipe("[data-animate='swipe']", swipe);
body { display: flex } .item { margin: 2.3rem; height: 100px; width: 100px; background: orange } .item.active { background: green }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item" data-animate="swipe"></div> <div class="item" data-animate="swipe"></div>
Advertisement
Answer
To boil it down to the basics:
function detectswipe(el, func) { /*Your stuff here*/ /*Get all the elements*/ ele = document.querySelectorAll(el); /*Iterate the elements*/ ele.forEach(function(item){ /*Add the event listeners*/ item.addEventListener("touchstart", function(e){/*your stuff*/}); item.addEventListener("touchmove", function(e){/*your stuff*/}); /*etc*/ }); }
Event delegation could also work here but we don’t know much about the structure of your document.