ele = document.querySelector(el) for multiple instances of el

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>

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.

Advertisement

Answer