Как связать «это», чтобы щелкнуть слушателя и использовать событие - es6 - PullRequest
Новая
       7

Как связать «это», чтобы щелкнуть слушателя и использовать событие - es6

0 голосов
/ 03 февраля 2020

У меня многоэтапная форма с 4-мя кадрами. Каждый должен войти, когда я нажимаю кнопку «Далее» (конечно)

Мой модульный код ES6 содержит что-то вроде этого: 

class FormController {
  // 1. describe and initiate object
  constructor() {
    this.nextBtn = $(".next");
    this.next_fs;
    .... 

    this.events();
  }

  // EVENTS LISTENER
  events(){
    this.nextBtn.on("click", this.nextClicked.bind(this));
    // other listeners
  }

  nextClicked() {
    this.next_fs = $(this)
      .parent()
      .next(); // this is the next fieldset
    // some actions...
  }
// rest of the code
}

Моя проблема заключается в следующем: мне нужно связать «this» внутри функции nextClicked, чтобы можно было использовать все переменные и методы, такие как this.next_fs, this.saveData(), et c ...

Но мне также нужно знать, какая кнопка была щелкнул, и я не могу знать, потому что this больше не является "этой кнопкой", и я не могу передать переменную (назовем ее 'e') для отслеживания e.target.

В чем проблема мой код? Я знаю, что это глупость, которую я не вижу.

Спасибо!

Ответы [ 3 ]

2 голосов
/ 03 февраля 2020

"... и я не могу передать переменную (назовем ее 'e') для отслеживания e.target"

На самом деле вы не не нужно передавать его как переменную, потому что даже если вы не передадите e, вы можете получить его в nextClicked, потому что браузеры делают это по умолчанию, поэтому он придет в качестве параметра, если вы объявите функцию как nextClicked(e){...} и сохраняйте связь, как у вас есть.

Или вы можете передать параметры после this, например ...bind(this, this.nextBtn), тогда первым параметром на nextCliked будет кнопка.

См. Ниже эти две возможности Я упомянул: 

$(".buttons").on("click", this.nextClicked.bind(this))

function nextClicked(e){
  //here your context is the same as when you binded the function, but you have the event
  let target = e.target;
  console.log(target.id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1" class="buttons">click me 1</button>
<button id="btn-2" class="buttons">click me 2</button>

let nextButton = $("#btn-1")[0];
$(".buttons").on("click", this.nextClicked.bind(this, nextButton))

function nextClicked(nextBtn, e) {
  //here your context is the same as when you binded the function,
  //but you have the button AND the event
  console.log("NextButton Id: " + nextBtn.id);
  console.log("Clicked button Id: " + e.target.id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1" class="buttons">next</button>
<button id="btn-2" class="buttons">previous</button>
2 голосов
/ 03 февраля 2020

Но мне также нужно знать, какая кнопка была нажата, и я не могу знать, потому что «this» больше не является «этой кнопкой», и я не могу передать переменную (давайте назовем ее «e») для trace e.target

Код запуска событий браузера передает это. Вам просто нужно прочитать это. 

nextClicked(e) {
1 голос
/ 03 февраля 2020

Вы делаете 

this.next_fs = $(this)

Но, ранее вы устанавливали для этого экземпляра FormController

 this.nextBtn.on("click", this.nextClicked.bind(this));

, поэтому вы делаете 

 this.next_fs = $( (FormController)this);

Вы ожидаете, что jQuery будет работать с экземпляром класса, а не с объектом события.

Я настоятельно не рекомендую вам использовать $(this) в контексте обработки событий. this может изменить его значение, как показано в примере с помощью взлома кода.

Всегда использовать event.target или event.currentTarget . Я предпочитаю currentTarget, поскольку он указывает на элемент, к которому привязано событие, а не на более глубокий элемент внутри этого элемента.

, поэтому ваш код должен быть 

nextClicked(e) {
    this.next_fs = $(e.currentTarget)
      .parent()
      .next(); // this is the next fieldset
    // some actions...
  }
...