как бы передать элемент в качестве параметра через вложенную функцию? - PullRequest
Новая
       17

как бы передать элемент в качестве параметра через вложенную функцию?

0 голосов
/ 04 марта 2019

Я пытаюсь передать селектор как параметр через Slider во вложенную функцию Object.

Я ожидал, что 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>

1 Ответ

0 голосов
/ 04 марта 2019

Когда вы устанавливаете обработчики событий, которые являются методами в некотором объекте и хотят передать некоторые параметры, а также дать им доступ this, вы можете создавать обработчики следующим образом - например, для функции istouchEnd

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

Как видите, istouchEnd не является обработчиком, но он создает и возвращает обработчик (используя функция стрелки ), который имеет доступ к this.coordX и параметру хранения.Вы используете его путем изменения 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>
...