我如何通过嵌套函数将元素作为参数传递？

Question

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> 

Answer 1

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 - eg 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>