各機能内で機能付きの値を送信する方法は？

Question

私はホバー上のマウスイベントを呼び出すためのjQuery each機能を使用します。

$('.entry .post-entry a').each(function(){ 
    root.setDimensions(this); 
    $(this).on("mouseenter", root.mouseEnter); 
    $(this).on("mousemove", root.mouseMove); 
    $(this).on("mouseleave", root.mouseLeave); 
    $(this).on("click", root.onClick); 
}); 

これは素晴らしい作品が、私は、これらの機能にアイテムのインデックスを送信する必要があります。問題は、各機能の最後に()の機能マークを追加すると、ページ読み込み後に関数が呼び出されますが、これは必要ありません。

パラメータを使用して関数に変数を送信する方法がわかりました。しかし、これらを使用するには、そのような中括弧を利用する必要があります。

$('.entry .post-entry a').each(function(index){ 
    var index = index; 
    root.setDimensions(this); 
    $(this).on("mouseenter", root.mouseEnter(index)); 
    $(this).on("mousemove", root.mouseMove(index)); 
    $(this).on("mouseleave", root.mouseLeave(index)); 
    $(this).on("click", root.onClick(index)); 
}); 

がどのように値を送ることができる関数を直接呼び出すことなく？

Answer 1

bind()を使用してみてください：あなたが実行したとき、それは（第二および前方のparam）を受け取ります機能（第一パラメータ）と、その後のパラメータの範囲を（当たり前）に結合することができます

$('.entry .post-entry a').each(function(index){ 
    var index = index; 
    root.setDimensions(this); 
    $(this).on("mouseenter", root.mouseEnter.bind(this, index)); 
    $(this).on("mousemove", root.mouseMove.bind(this, index)); 
    $(this).on("mouseleave", root.mouseLeave.bind(this, index)); 
    $(this).on("click", root.onClick.bind(this, index)); 
}); 

bind()で。

---

実際、@ RoryMcCrossanが言ったことは：ループ内のイベントをバインドするのは良いことではありません。ベストプラクティスは、1つの選択肢にバインドすることです。 しかし、と彼は、イベントの中でindex()を使用するように提案しました。良いイデアであるかどうかは、イベントが呼び出される頻度によって異なります。そのために、あなたはbind()とtogheter index()を使用して、それらを繰り返していない、両方の方法を混在させることができます：

$.fn.onWithIndex = function(eventType, callback) { 
    $(this).on(eventType, function(e) { 
    var $el = $(this), 
      index = $el.data("index") ? $el.data("index") : $el.index(); 

    $el.data("index", index); 
    callback.call(this, index, e); 
    }); 
}; 

// Use 
$(".posts a").onWithIndex("mouseenter", root.mouseEnter); 

この関数は、それを行う方法のサンプルです。そうした種類のイベントがたくさん必要な場合は、いい方法です。イベントラッパーを実行して、エレメントのデータ内の保管索引が見つからない場合は、index()を実行します。この関数はサンプルであり、元のon()などのセレクタパラメータでは機能しません（例：$('...').on("mouseenter", "another-selector", function() { .. });）。これは動作しません。

Demo

Answer 2

部分的に適用されたパラメータを持つ関数を返しますバウンド関数を作成します。

$('.entry .post-entry a').each(function(index){ 
    var index = index; 
    root.setDimensions(this); 
    $(this).on("mouseenter", root.mouseEnter.bind(root, index)); 
    $(this).on("mousemove", root.mouseMove.bind(root, index)); 
    $(this).on("mouseleave", root.mouseLeave.bind(root, index)); 
    $(this).on("click", root.onClick.bind(root, index)); 
}); 

続きを読むFunction.prototype.bind property hereを参照してください。

Answer 3

イベントハンドラをループ内に割り当てることは、各インスタンスがイベントを発生させた要素から現在の要素インデックスを取得できるため、冗長です。これを試してください：