jQuery on('hover') 事件替换答案

【问题标题】：jQuery on('hover') Event ReplacementjQuery on('hover') 事件替换
【发布时间】：2013-06-22 11:48:57
【问题描述】：

我希望在悬停时交换一个 img src。通常我会使用：

$('#img').hover(function() {
    $(this).attr('src', 'http://www.example.com/new-img.jpg');
});

但是，我通过 Ajax 加载内容，所以通常我会使用：

$('#main').on('hover', '#img', function() {
    $('#img').attr('src', 'http://www.example.com/new-img.jpg');
});

但我读到 on('hover', ...) 在 jQuery 1.8 中已弃用并在 1.9 (jQuery Docs) 中删除，这是我目前使用的。除了使用：

$('#main').on('mouseenter', '#img', function() {
   $('#img').attr('src', 'http://www.example.com/new-img.jpg');
});

$('#main').on('mouseleave', '#img', function() {
   $('#img').attr('src', 'http://www.example.com/old-img.jpg');
});

【问题讨论】：

使用mouseenter和mouseleave有什么问题？
没问题，我只是想看看是否有人有更短/更简单的解决方法。

标签： jquery jquery-hover jquery-on

【解决方案1】：

不，您需要分两次调用。但是对于添加的 jQuery 点，您可以将它们链接起来：

$('#main').on('mouseenter', '#img', function() {
   $('#img').attr('src', 'http://www.example.com/new-img.jpg');
}).on('mouseleave', '#img', function() {
   $('#img').attr('src', 'http://www.example.com/old-img.jpg');
});

正如下面的 Benjamin cmets 一样，您可以进一步优化（这次您将获得普通的旧 Javascript 点）：

$('#main').on('mouseenter', '#img', function() {
   this.src = 'http://www.example.com/new-img.jpg';
}).on('mouseleave', '#img', function() {
   this.src = 'http://www.example.com/old-img.jpg';
});

【讨论】：

在这种情况下，将多个事件传递给一个 .on() 调用就没有那么有意义了。正如Shaddow的回答一样。
@kmfk 但是这种方式不支持事件委托。 “我正在通过 Ajax 加载内容”
将无法使用@Shaddow，因为内容是通过 ajax 加载的......看起来我会这样做。
@BenjaminGruenbaum 确实是this.src。谢谢：已添加。
是的，我的旧解决方案不支持事件延迟

【解决方案2】：

您可以应用多个事件，然后像这样检查event.type：

$('#main').on('mouseenter mouseleave', '#img', function(e) {
    $(this).attr('src', 'http://www.example.com/' + (e.type == 'moseenter' ? 'new-img.jpg' : 'old-img.jpg'));
});

jsFiddle

您也可以使用switch-case 或if/else：

$('#main').on('mouseenter mouseleave', '#img', function(e) {
    switch(e.type) {
        case 'mouseenter':
            $(this).attr('src', 'http://www.example.com/new-img.jpg');
            break;
        case 'mouseleave':
            $(this).attr('src', 'http://www.example.com/old-img.jpg');
            break;
    }
}

【讨论】：

迄今为止最好的答案

【解决方案3】：

这是一种完全不涉及 JavaScript 的替代方法：

不要使用带有src 属性的<img>，而是使用一个div，给那个div 赋予相同的id（记得给它正确的宽度和高度）。

在你的 CSS 中，给 div 一个 background-image 类似的东西：

#img{ 
    background-image: url('http://www.example.com/old-img.jpg');
}

打开:hover 更改它

#img:hover{ 
    background-image: url('http://www.example.com/new-img.jpg');
}

(fiddle)

【讨论】：

好吧，如果我想使用 CSS，我可能会创建一个精灵并更改 background-position 以获得更快的加载时间；）...但这更多是出于好奇。
@pennstate_fanboy 啊，好吧，我以为你不知道这项技术。顺便说一句，如果您只是更改图像源，这比 jQuery 选项更可取。尤其是委托。
没错，就像我说的，更多的是出于好奇。我还有一些其他事件在同一个 hover 上触发，所以我想我只需将 img src 更改放入其中。
@pennstate_fanboy 我完全同意你的看法，这不是灵丹妙药。 CSS 伪选择器仅用于表示行为。如果您有实际的业务逻辑必须在悬停时发生，他们可能不会这样做。在这些演示案例中，它们更快，也更容易 imo。