CODEWITHSUNDEEP
javascriptjqueryhtmldata-structuresprototype
l3lue
l3lue

Reputation: 541

how would i pass the element as a parameter through the nested function?

I'm trying to pass the selector as a parameter through the Slider to an Object nested function.

I expected that istouchEnd could get the .storage1 as a parameter form the Slider but this.storage never receives the parameter from the Slider function.

Is there any ways to pass(or get whatever) the span tag through the Slider function as a parameter?

'use strict';

const blueMethods = {
  count: 1,
  istouchStart(e) {
    this.coordX = e.touches[0].clientX;
    return this.coordX;
  },
  istouchMove(e) {
    let drag = e.touches[0].clientX;
    let dist = Math.sqrt(drag + this.coordX);
  },
  istouchEnd(e) {
    let dist = e.changedTouches[0].clientX - this.coordX; 
    $(this.storage).text(dist);
  }
}
function Slider(target, storage) {
  Slider.target = target;
  Slider.storage = storage;
  $(Slider.target).stop(true, true).on({
  touchstart:blueMethods.istouchStart, 
  touchmove:blueMethods.istouchMove,
  touchend:blueMethods.istouchEnd
  });
};

const box1 = Slider('.page1', '.storage1');
box1;
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 70%;
  float: left;
}

.page1 {
  width: 48vw;
  height: 80vh;
  background-color: lightblue;
  float: left;
}

.page2 {
  width: 48vw;
  height: 80vh;
  background-color: orange;
  float: left;
}
<div class="box">
  <div class="page1"></div>
  <div class="page2"></div>
</div>
<div class="textbox">
  <span class="storage1"></span>
  <span class="storage2" data-count></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 3

Views: 120

Answers (1)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92447

When you set event handlers which are methods in some object and want to pass some parameters and also give them acces this you can create handlers in following way - e.g. for function istouchEnd

  istouchEnd(storage) {
    return (e) => {
      let dist = e.changedTouches[0].clientX - this.coordX; 
      $(storage).text(dist);
    }
  }

As you see the istouchEnd is not handler, but it create and return handler (using arrow function) which has access to this.coordX and storage parameter. You use it by change touchend:blueMethods.istouchEnd to

touchend:blueMethods.istouchEnd(storage)


'use strict';
const blueMethods = {
  count: 1,
  istouchStart() {
    return (e) => {
      this.coordX = e.touches[0].clientX;
      return this.coordX;
    }
  },
  istouchMove() {
    return (e) => {
      let drag = e.touches[0].clientX;
      let dist = Math.sqrt(drag + this.coordX);
    }
  },
  istouchEnd(storage) {
    return (e) => {
      let dist = e.changedTouches[0].clientX - this.coordX; 
      $(storage).text(dist);
    }
  }
}
function Slider(target, storage) {
  Slider.target = target;
  Slider.storage = storage;
  $(Slider.target).stop(true, true).on({
  touchstart:blueMethods.istouchStart(), 
  touchmove:blueMethods.istouchMove(),
  touchend:blueMethods.istouchEnd(storage)
  });
};

const box1 = Slider('.page1', '.storage1');
box1;
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 70%;
  float: left;
}

.page1 {
  width: 48vw;
  height: 80vh;
  background-color: lightblue;
  float: left;
}

.page2 {
  width: 48vw;
  height: 80vh;
  background-color: orange;
  float: left;
}
<div class="box">
  <div class="page1"></div>
  <div class="page2"></div>
</div>
<div class="textbox">
  <span class="storage1"></span>
  <span class="storage2" data-count></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Related Questions