Afficher/masquer l'image lors de la souris sur la ligne du tableau via jquery traversal?

Question

J'ai quelques lignes d'une table (ick!) Tels que:

<tr id="similar_story"> 
<td class="title"><a href="/">Title</a> <a href="../"><img id="srcimg" src="source.png" style="display:none"></a></td> 
</tr> 

cela est répété x fois [pour chaque histoire similaire], et lorsqu'un utilisateur passe au-dessus de la ligne .class Je veux #srcimg (pour cette ligne) à apparaître.

Lorsque cette ligne perd le focus, le #srcimg devrait disparaître.

Quelle est la méthode appropriée pour cela via jquery? J'ai essayé de faire quelque chose le long des lignes de:

jQuery('td.title').mouseover(function() { 
jQuery.('#srcimg').visible(); 
}); 

Mais ce (évidemment?) Montre la #srcimg sur chaque ligne. Considérant que, je veux juste montrer celui dans cette rangée de tableau.

Je suppose qu'il doit y avoir une certaine traversée pour localiser l'image appropriée?

Answer 1

jQuery('td.title').mouseover(function() { 
    jQuery(this).parents("tr:first").find('#srcimg').visible(); 
}); 

Vous devez échanger l'ID pour la classe sur l'image, tho. Les ID sont pour les éléments qui sont uniques, la classe est pour la classification de plusieurs éléments similaires.

Answer 2

J'utiliserais .live et .closest plutôt que d'attacher plusieurs gestionnaires de survol et de .parents. En outre, comme la réponse précédente a souligné, utiliser des classes comme ID sont uniques.

jQuery('td.title').live('mouseover', function() { 
    jQuery(this).closest("tr").find('img.someClass').visible(); 
});