Question

我试图将选择器作为参数通过Slider传递给对象嵌套函数。

我希望istouchEnd可以从.storage1获取Slider作为参数，但是this.storage永远不会从Slider函数接收该参数。

是否可以通过span函数将Slider标签作为参数传递（或获取任何东西）？

'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

当您设置事件处理程序时，这些事件处理程序是某个对象中的方法，并且希望传递一些参数并为其分配访问权限this，则可以按以下方式创建处理程序-例如用于功能istouchEnd

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

您看到istouchEnd不是处理程序，但是它创建并返回了处理程序（使用arrow function），该处理程序可以访问this.coordX和storage参数。您可以通过将touchend:blueMethods.istouchEnd更改为

来使用它

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>

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

1 个答案: