Cibler plusieurs éléments avec jQuery

J’ai effectué une recherche, mais je suis resté blanc et je me demande si je peux utiliser une instruction jQuery pour cibler plusieurs éléments d’une page. J’ai plusieurs boutons identiques sur une page et ils se composent chacun d’un arrière-plan gauche, moyen et droit où le milieu contient le texte et peut être agrandi à n’importe quelle taille. Chacun a un identifiant et / ou une classe unique. Je l’ai maintenant configuré pour que lorsque vous passez la souris sur leur conteneur div les 3 arrière-plans changent pour donner l’apparence que les boutons sont dans un état différent. Pour ce faire, il y a maintenant 1 appel stationnaire pour chaque bouton situé par classe (utilisez plutôt un identifiant mais vous ne pouvez pas avoir plusieurs éléments avec le même identifiant). Ce survol est suivi de 8 événements. Un changement d’arrière-plan pour chaque droite à gauche et au milieu et un changement de couleur pour le texte intermédiaire.

Cela signifie beaucoup de lignes de code. Ce que je veux, c’est pouvoir appeler tous les boutons en même temps avec l’événement de survol ou que celui-ci sache en quelque sorte quel bouton est survolé et renvoyer cette classe ou cet identifiant ou même ce nom à jQuery, qui peut boutons sous-classes pour droite gauche et milieu. La sous-classe pour right left et Middle est identique sur tous les boutons. Par conséquent, si l’événement de survol pouvait être concentré sur l’événement appelé, je n’aurais besoin que d’un ensemble d’appels pour modifier les atsortingbuts de l’arrière-plan … Le code actuel est inférieur à deux des boutons …

$j(".learnMoreButton").hover( function () { $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); $j('.learnMoreButton .buttonMiddle a').css({color:"#ffffff"}); $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"}); }, function () { $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"}); $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); $j('.learnMoreButton .buttonMiddle a').css("color", "#666"); $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"}); } ); $j(".bioButton").hover( function () { $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); $j('.bioButton .buttonMiddle a').css({color:"#ffffff"}); $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"}); }, function () { $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"}); $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); $j('.bioButton .buttonMiddle a').css("color", "#666"); $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"}); } );

Tu peux faire:

 $(".learnMoreButton, .bioButton").hover(function() { $(this).find(".buttonRight")... ... }, function() { ... });

J’appendai que je pense que vous feriez mieux de le faire avec les classes CSS.

 .buttonLeft { background: url(/images/concaveBtn-Left.gif) } .buttonMiddle { background-image: url(/images/concaveBtn-Middle.gif) } .buttonMiddle a { color: #666; } .buttonRight { url(/images/concaveBtn-Right.gif) } .hoverover .buttonLeft { url(/images/concaveBtn-Left2.gif) } .hoverover .buttonMiddle { url(/images/concaveBtn-Middle2.gif) } .hoverover .buttonMiddle a { color: #FFF; } .hoverover .buttonRight { background: url(/images/concaveBtn-Right2.gif) }

 $(".learnMoreButton, .bioButton").hover(function() { $(this).addClass("hoverover"); }, function() { $(this).removeClass("hoverover"); });

et vous aurez beaucoup moins de code.

Aussi, vous pouvez donner des éléments à plusieurs classes afin:

  ... 
  ...

et puis cela devient encore plus simple:

 $(".hoverbutton").hover(function() { $(this).addClass("hoverover"); }, function() { $(this).removeClass("hoverover"); });

 $j(".learnMoreButton, .bioButton").hover( function () { var $this = $j(this); //this points to DOM element hovered, $j() makes jQuery object out of it. //this syntax tells jQuery to search only inside $this element. $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left2.gif)"}); $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle2.gif)"); $j('.buttonMiddle a', $this).css({color:"#ffffff"}); $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right2.gif)"}); }, function () { var $this = $j(this); $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left.gif)"}); $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle.gif)"); $j('.buttonMiddle a', $this).css("color", "#666"); $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right.gif)"}); } );

Actuellement, le code ressemble à ceci:

 $j(function (){ $j(".hoverBTN").hover( function() { $j(this).addClass("hoveroverL"); $j(this).addClass("hoveroverM"); $j(this).addClass("hoveroverR"); }, function() { $j(this).removeClass("hoveroverL"); $j(this).removeClass("hoveroverM"); $j(this).removeClass("hoveroverR"); }); });

Ce qui fonctionne mais sur les mauvais éléments. Il modifie actuellement le bouton survolé, mais il ajoute 3 classes à l’encapsuleur et non aux sous-classes de Droite Gauche et du milieu: Voici un exemple de bouton:

  
 Timeline

Vous pouvez également envisager de ne pas utiliser jQuery ou Javascript du tout pour cela. CSS devrait être suffisant. Donnez simplement à chaque bouton la même classe et faites quelque chose comme ceci dans votre CSS:

 .button .buttonLeft { background: url(/images/concaveBtn-Left.gif) } .button .buttonMiddle { background: url(/images/concaveBtn-Middle.gif); color: #666; } .button .buttonRight { background: url(/images/concaveBtn-Right.gif) } .button:hover .buttonLeft { background: url(/images/concaveBtn-Left2.gif) } .button:hover .buttonMiddle { background: url(/images/concaveBtn-Middle2.gif); color: #ffffff; } .button:hover .buttonRight { background: url(/images/concaveBtn-Right2.gif) }

Il existe cependant une réserve; IE (au moins certaines versions?) Ne supporte pas: survolez les divs. Pour résoudre ce , un bouton en et placez les éléments à styler à l’intérieur du bouton en tant que .

Ok, ça marche! Merci Cletus de m’avoir envoyé dans la bonne direction … Je devais utiliser le sélecteur d’enfants à ce sujet, puis choisir chaque enfant et modifier ses classes individuellement …

 $j(function (){ $j(".hoverBTN").hover( function() { $j(this).children('div:nth-child(1)').addClass("hoveroverL"); $j(this).children('div:nth-child(2)').addClass("hoveroverM"); $j(this).children('div:nth-child(3)').addClass("hoveroverR"); }, function() { $j(this).children('div:nth-child(1)').removeClass("hoveroverL"); $j(this).children('div:nth-child(2)').removeClass("hoveroverM"); $j(this).children('div:nth-child(3)').removeClass("hoveroverR"); });

});

Fonctionne parfaitement de cette façon. Je voulais quelque chose de compact et facilement réutilisable et je pense que cela couvre les deux. Merci encore à tous …