如何用每个函数中的函数发送一个值？

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 
});