jQuery简化代码（初学者）答案

【问题标题】：jQuery simplifying code (beginner)jQuery简化代码（初学者）
【发布时间】：2010-06-03 16:32:56
【问题描述】：

我开始掌握 jQuery，但发现自己一遍又一遍地重复代码......

当然有更简单的写法：

$('#more-mcr, #more-hilton, #more-lpool').hide();


$('#mcr-hatters').hoverIntent(function() {
    $('#mcr-hilton').stop().animate({opacity: 0.4});
    $('#more-mcr').fadeIn({duration:200});
}, function() {
    $('#mcr-hilton').stop().animate({opacity: 1});
    $('#more-mcr').fadeOut({duration:200});
});

$('#mcr-hilton').hoverIntent(function() {
    $('#mcr-hatters').stop().animate({opacity: 0.4});
    $('#more-hilton').fadeIn({duration:200});
}, function() {
    $('#mcr-hatters').stop().animate({opacity: 1});
    $('#more-hilton').fadeOut({duration:200});
});

$('#lpool-hostel').hoverIntent(function() {
    $('#more-lpool').fadeIn({duration:200});
}, function() {
    $('#more-lpool').fadeOut({duration:200});
});

$('#offers-mcr').hoverIntent(function() {
    $('#offers-lpool').stop().animate({opacity: 0.4});
    $('#offers-bham').stop().animate({opacity: 0.4});
}, function() {
    $('#offers-lpool').stop().animate({opacity: 1});
    $('#offers-bham').stop().animate({opacity: 1});
});

$('#offers-lpool').hoverIntent(function() {
    $('#offers-mcr').stop().animate({opacity: 0.4});
    $('#offers-bham').stop().animate({opacity: 0.4});
}, function() {
    $('#offers-mcr').stop().animate({opacity: 1});
    $('#offers-bham').stop().animate({opacity: 1});
});

$('#offers-bham').hoverIntent(function() {
    $('#offers-lpool').stop().animate({opacity: 0.4});
    $('#offers-mcr').stop().animate({opacity: 0.4});
}, function() {
    $('#offers-lpool').stop().animate({opacity: 1});
    $('#offers-mcr').stop().animate({opacity: 1});
});

我也想为 hoverIntent 设置延迟，但我认为我目前编写代码的方式不可能做到这一点......？

【问题讨论】：

标签： jquery simplify hoverintent

【解决方案1】：

为您想要悬停的各种项目添加一个类，例如hoverItem。然后您可以使用$('.hoverItem').hoverIntent(function() ...); 一次设置多个项目。鉴于您给出的示例定义了两个不同的不透明度，我将创建两个类。

【讨论】：

如果有很多相同的项目，两个类可能会工作，但如果要保持在这几个，ID选择器可能会更快。

【解决方案2】：

您可以创建一个命名函数（例如 function myHover() {}），然后在您的 .hoverIntent 中将其引用为 .hoverIntent(myHover)。此外，当您希望两个 ID 具有相同的附加功能时，请考虑使用 Multiple Selector。

【讨论】：