如何用每個函數中的函數發送一個值？

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()：

$('.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()可以綁定（杜）一個範圍的功能（第一個參數），然後參數在執行時會接收（第2和前進PARAM）。

---

其實什麼@RoryMcCrossan說的是真的：這是不是件愉快​​的事件綁定whitin循環。最好的做法是將它們與一個選擇綁定。 但是，他建議在事件內部使用index()，根據這些事件被調用的頻率，什麼可以或不可以是一個好意思。對於您可以混合使用這兩種方法，使用bind()和index() togheter，但不能重複他們：

$.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

在循環內分配事件處理程序是多餘的，因爲每個實例都可以從引發事件的元素獲取當前元素索引。試試這個：

var $a = $('.entry .post-entry a'); 
$a.each(function() { 
    root.setDimensions(this); 
}); 

var root = { 
    mouseEnter: function(e) { 
     var index = $(this).index($a); 
     // work with index here... 
    }, 
    // other event handlers here... 
} 

$a.on({ 
    mouseenter: root.mouseEnter, 
    mousemove: root.mouseMove, 
    mouseleave: root.mouseLeave, 
    click: root.onClick 
});