1

我的 js 文件之一中有以下代码

$('#elementID').hoverIntent({
    over: function() {//function#1 body},
    out: function() {// function#2 body}
});

在我的另一个 js 文件中，我想向 hoverIntent 添加另一种方法。但是新的绑定会覆盖之前的绑定，只有新的绑定才会执行。

$('#elementID').hoverIntent({
    over: function() {//function#3 body}
});

所以我希望函数#1 和函数#3 都在悬停时执行。

使用hoverIntent甚至可能吗？

如果不是，请您指点我另一个方向，以便我可以做到这一点？

注意：我无权更改第一个文件。我只想为悬停添加额外的功能。

谢谢你。

4

3 回答 3

1

我知道这是一个老问题，但它是在搜索中出现的，所以我在这里插入我的答案，以防其他人遇到它。

hoverIntent 插件并不意味着处理多个回调，所以我已经修补了一个版本。它没有完全测试跨浏览器的兼容性，但由于一切都是通过 jQuery 的 API 完成的，所以应该没问题。

Github 链接

于 2012-10-31T13:06:03.617 回答
0

在我看来，hoverIntent 插件未设置为支持多个事件处理程序。您可能需要修补 hoverIntent 代码才能使其正常工作。

于 2011-04-01T22:11:19.447 回答
0

一种方法是修改插件hoverIntent，使其配置变量cfg, 是公开的。cfg = $.extend(cfg, g ? { over: f, out: g } : f );在插件行之后，添加：

cfg = $.extend(cfg, g ? { over: f, out: g } : f );
$.fn.hoverIntent.cfg = cfg;

然后，您可以这样做：

$("#elementID").hoverIntent({
    over:   function(){ $(this).val("over"); },
    out:    function(){ $(this).val("out"); }
});

var cfg = $("#elementID").hoverIntent.cfg;
$.extend(cfg, { over: function(){ $(this).val("new over"); } });
$("#elementID").hoverIntent(cfg);

这并不理想，但我不确定在不修改插件、扩展配置变量和重新初始化#elementID.

更新 1：

我以前误解了OP的要求。他需要函数#1 和#3 而不是#2 来触发：

$("#elementID").hoverIntent({
    over:   function(){ //function #1 },
    out:    function(){ //function #2 }
});

var cfg = $("#elementID").hoverIntent.cfg;
var oldOver = cfg.over; // function #1

$.extend(cfg, { 
    out: false,
    over: function(){
    oldOver(); // call oldOver aka function #1 above
    // function #3
}});
$("#elementID").hoverIntent(cfg);

更新 2：

我的上述解决方案不起作用，因为它只是创建了一个全局变量，cfg然后通过$.hoverIntent.

这是使用该$.data()方法的另一个尝试：

cfg = $.extend(cfg, g ? { over: f, out: g } : f );在插件行之后，添加：

cfg = $.extend(cfg, g ? { over: f, out: g } : f );
$(this).data('cfg', cfg);

然后：

$("#elementID").hoverIntent({
    over:   function(){ //function #1 },
    out:    function(){ //function #2 }
});

var cfg = $("#elementID").data('cfg');
var oldOver = cfg.over; // function #1

$.extend(cfg, { 
    out: false,
    over: function(){
    oldOver(); // call oldOver aka function #1 above
    // function #3
}});
$("#elementID").hoverIntent(cfg);
于 2011-04-01T22:11:44.017 回答