Cibler un seul dans

Petite question, j’ai une liste non ordonnée de “produits” et je veux que la description apparaisse en vol stationnaire. Cela fonctionne très bien, sauf que l’animation est appliquée à chaque produit à la fois. Comment cibler l’élément de la liste sur lequel je survole sans donner d’identifiant unique à chaque li? Je suis sûr que la réponse utilise “ceci” mais je n’ai pas trouvé comment le faire avec succès.

Des produits:

     Description 1... 
 
 
     Description 2... 
Lignes multiples pour “Modifier les valeurs de la liste déroulante en fonction de la saisie dans un champ de texte”
Le plugin jQuery Validate ne fonctionne pas avec la méthode rules (‘add’)
Sélecteur jQuery: déléguer un événement de clic à seulement les éléments tr avec des données spécifiques
Passage d’un object JSON à une méthode de contrôleur ASP.NET MVC à l’aide d’un argument de valeur de clé
Trouver des parenthèses ouvrantes et fermantes dans un champ de saisie, les supprimer (avec tout ce qu’il contient

javascript:

 $(document).ready(function() { $('#products li').hover(function(){ $(".productDesc").fadeIn("slow"); }, function(){ $(".productDesc").fadeOut("slow"); }); });

CSS:

  .productDesc{ display:none; }

Vous devez utiliser $(this) pour obtenir une référence à l’élément de liste survolé avec .find () pour obtenir l’enfant .productDesc intérieur de cet élément de liste survolé:

 $(document).ready(function() { $('#products li').hover(function(){ $(this).find(".productDesc").fadeIn("slow"); }, function(){ $(this).find(".productDesc").fadeOut("slow"); }); });

Démo de violon

Vous pouvez également raccourcir votre code en utilisant .fadeToggle () pour basculer entre fadeIn et fadeOut

 $(document).ready(function() { $('#products li').hover(function(){ $(this).find(".productDesc").fadeToggle("slow"); }); });

Démo de violon

Utilisez this (qui sera le li lequel vous .productDesc ), et trouvez le .productDesc dans cet élément.

 $('#products li').hover(function(){ $(this).find(".productDesc").fadeIn("slow"); }, function(){ $(this).find(".productDesc").fadeOut("slow"); });

 $(document).ready(function() { $('#products li').on('mouseenter mouseleave', function() { $(".productDesc", this).fadeToggle('slow'); }); });

VIOLON

this à l’intérieur des gestionnaires d’événements fait référence à l’élément cible actuel, vous pouvez donc trouver l’élément productDesc dans le li actuel en utilisant

 $(document).ready(function () { $('#products li').hover(function () { $(this).find(".productDesc").fadeIn("slow"); }, function () { $(this).find(".productDesc").fadeOut("slow"); }); });