Sélectionner l'élément à l'intérieur de td

Question

J'ai le code jQuery suivant pour mettre en évidence les cellules du tableau.

Voici mon html:

<table> 
    <tr> 
     <td class="day"> 
      <span class='hiddenImage'><img src='/images/test.png' /></span> 
     </td> 
     <td class="day"><span class='hiddenImage'><img src='/images/test.png' /></span> 
     </td> 
    </tr> 
</table> 

ici est mon code jquery

$("td").hover(
    function() { 
      [show image] 
    }, 
    function() { 
      [hide image] 
    } 
); 

intérieur de la cellule de table, j'ai un <span> caché avec le nom de classe hiddenImage. Comment afficher l'image lorsque je passe la souris sur cette cellule td?

Quelque chose comme ça à l'intérieur des fonctions (mais ci-dessous ne semble pas fonctionner)

$(this '.hiddenImage').show(); 

Answer 1

je le ferais en CSS avec une règle qui piggbacks la classe que vous utilisez déjà .hover, comme ceci:

td.hover .hiddenImage { display: inline-block; } 

Ensuite, votre jQuery est plus simple ainsi:

$("td").hover(function() { 
    $(this).toggleClass("hover"); 
}); 

---

Ou, si vous ne se soucient pas de IE6 alors le faire complètement en CSS (pas de script du tout):

td:hover { ...styling... } 
td:hover .hiddenImage { display: inline-block; } 

---

Ou si vous doit dans jQuery (bien qu'il est surpuissant), utilisez .find() pour obtenir un élément à l'intérieur, comme celui-ci:

$("td").hover(function() { 
    $(this).toggleClass("hover").find(".hiddenImage").toggle(); 
});