3

私は自分のプロジェクトを ES2015 を使用するように変換していますが、jQuery の .on イベント ハンドラーに関しては、「this」キーワードを自然に処理するために問題が発生しました。

これが私のコード例です：

$(".actionBtns").on('click', '.editButton', this.handlerEditBtnClick) //Would give 'this' the value of the button clicked
$(".actionBtns").on('click', '.editButton', () => {this.handlerEditBtnClick()}) //Would give 'this' the value of the class

ES2015 を使用するために上記のコードの最初の行を書き直す方法がわかりません。

関数 handlerEditBtnClick では、「this」をクラスにする必要がありますが、クリックされたボタンへのアクセスも必要です。

私の試行 (上記のコードの 2 行目) では、クリックされたボタン DOM 要素にアクセスできません。少なくとも、アクセスすることは考えられません。

ありがとう、

ルーク

編集 これは handlerEditBtnClick() 関数です。

handlerEditBtnClicked() {
  var $item = $(this); //This isn't re-written yet, so 'this' actually refers to the edit button that was clicked
  this.editItem($item); //This is where I need 'this' to be the class
}

「これ」が2つの異なるものである必要がある場所がわかります.. this.editItem();以外のhandlerEditBtnClick内からeditItem関数を呼び出す方法が完全にはわかりません。

入力しやすいように、名前は単なる一般的な名前であることに注意してください

4

2 に答える 2

2

in $(".actionBtns").on('click', '.editButton', () => {this.handlerEditBtnClick()}) handlerEditBtnClickfunction は異なるコンテキストで呼び出されます (クラス をthis参照します)。
()=>{}function(){}.bind(this)

$(".actionBtns").on('click', '.editButton', () => {this.handlerEditBtnClick()})

また

$(".actionBtns").on('click', '.editButton', this.handlerEditBtnClick.bind(this))

次に、クリックされたボタンにアクセスするために、いつでも使用できますe.target
（またはe.currentTarget必要に応じて）

function handlerEditBtnClick(e) {
 console.log(e.target); // button that was clicked
}
于 2016-01-01T12:26:50.940 に答える
1

このようにすることもできます (はい、ES5 構文で):

$('.element').click(function (){
    $(this)===$('.element') //true
});

おそらく、「矢印の方法」と書かれていると（ES6に変換した後）、jQueryがセレクターを関数にバインドできないためです。

いくつかの特定のケースで自分自身をチェックしたか、単にevent.target.

于 2017-05-04T13:25:34.510 に答える