Code simplifiant jQuery (débutant)

Question

Je suis en train de se familiariser avec jQuery, mais moi-même trouver le code à répéter encore et encore ...

Certes, il y a un moyen plus simple d'écrire ceci:

$('#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}); 
}); 

I J'aimerais aussi définir le délai pour hoverIntent mais je ne pense pas que ce soit possible avec la façon dont j'ai écrit le code actuellement ...?

Answer 1

Ajoutez une classe aux différents éléments sur lesquels vous souhaitez placer votre curseur, par exemple hoverItem. Ensuite, vous pouvez utiliser $('.hoverItem').hoverIntent(function() ...); pour définir plusieurs éléments à la fois. Compte tenu de la graisse que l'exemple que vous avez donné a deux opacités différentes définies, je voudrais créer deux classes.

Answer 2

Vous pouvez créer une fonction nommée (par exemple, la fonction myHover() {}), puis dans votre .hoverIntent la référence .hoverIntent(myHover). En outre, envisagez d'utiliser le Multiple Selector lorsque vous souhaitez que deux ID aient la même fonction attachée.