jQuery hover sélectif

Question

J'essaye de faire une tâche simple avec jQuery: J'ai une liste de mots qui, quand survolée, devrait fondre dans son image correspondante. Par exemple:

<a href="#" class="yellow">Yellow</a> 
<a href="#" class="blue">Blue</a> 
<a href="#" class="green">Green</a> 

<img src="yellow.jpg" class="yellow"> 
<img src="blue.jpg" class="blue"> 
<img src="green.jpg" class="green"> 

que je fais actuellement cette façon pour chaque lien/image:

$('a.yellow').hover(
    function() { 
    $('img.yellow').fadeIn('fast'); 
    }, 
    function() { 
    $('img.yellow').fadeOut('fast'); 
    }); 

La méthode ci-dessus fonctionne très bien, mais comme je suis encore à apprendre, je pense qu'il ya une meilleure manière de le faire au lieu de répéter les fonctions.

Quelqu'un peut-il me donner de la lumière ici? Comment puis-je améliorer ce code?

Answer 1

<a href="#" class="yellow" data-type="color">Yellow</a> 
<a href="#" class="blue" data-type="color">Blue</a> 
<a href="#" class="green" data-type="color">Green</a> 

jQuery code

$('a[data-type=color]').hover(
    function() { 
    $('img.'+$(this).attr("class")).fadeIn('fast'); 
    }, 
    function() { 
    $('img.'+$(this).attr("class")).fadeOut('fast'); 
    }); 
}); 

Je pense que vous devriez essayer celui-ci. J'ai utilisé data- comme préfixe pour les attributs personnalisés car il est compatible avec html5. Vous pouvez dire data-something si vous voulez.

Normalement, vous n'aurez peut-être pas besoin d'utiliser l'attribut personnalisé de couleur de données, mais puisque je pense que pour le rendre plus générique, j'ai utilisé cet attribut. Vous pouvez faire un tel code ainsi:

<a href="#" class="yellow">Yellow</a> 
<a href="#" class="blue">Blue</a> 
<a href="#" class="green">Green</a> 

Puis

$('a').hover(
    function() { 
    $('img.'+$(this).attr("class")).fadeIn('fast'); 
    }, 
    function() { 
    $('img.'+$(this).attr("class")).fadeOut('fast'); 
    }); 
}); 

Mais cette façon, vous devez vous assurer que tous les liens sont des liens liés à l'image.

Answer 2

<a href="#" id="yellow" class="colorLink">Yellow</a> 
<a href="#" id="blue" class="colorLink">Blue</a> 
<a href="#" id="green" class="colorLink">Green</a> 

<img src="yellow.jpg" class="yellow"> 
<img src="blue.jpg" class="blue"> 
<img src="green.jpg" class="green"> 

$("a.colorLink").hover(
    function(){ 
     $("img."+this.id).fadeIn('fast'); 
    }, 
    function(){ 
     $("img."+this.id).fadeOut('fast'); 
    } 
); 

Ceci définit un identifiant unique pour chaque lien qui correspond à l'image.