jquery clique sur l'élément enfant pour ajouter du style

Comment cliquer sur des éléments enfants et ajouter des styles avec jQuery

jQuery est une bibliothèque JavaScript populaire qui permet d'écrire du code JavaScript de manière à améliorer la simplicité et la lisibilité du code. jQuery dispose d'une série de fonctions pratiques de manipulation du DOM qui facilitent la manipulation des éléments de la page. Dans cet article, je vais vous montrer comment utiliser jQuery pour cliquer sur des éléments enfants et ajouter des styles.

Étape 1 : Présentez jQuery

Ajoutez la bibliothèque jQuery à votre fichier HTML. Vous pouvez le télécharger depuis le site officiel ou vous connecter directement au CDN de jQuery dans votre fichier HTML. Voici un CDN à titre d'exemple :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Étape 2 : Écrire le code HTML et CSS

Préparez une page HTML avec plusieurs sous-éléments sur lesquels on cliquera. En même temps, définissez le style en CSS pour distinguer les changements de style après avoir cliqué. Par exemple :

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.child {
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.clicked {
  background-color: yellow;
}

Ici, nous avons configuré trois éléments enfants qui changeront leur couleur d'arrière-plan lorsqu'on cliquera dessus.

Étape 3 : Écrire le code jQuery

Nous devons écrire du code pour gérer ce qui se passe lorsque l'on clique sur l'élément enfant. Tout d’abord, nous devons sélectionner tous les éléments enfants. À l'aide du sélecteur d'éléments enfants de jQuery, nous pouvons facilement sélectionner tous les éléments enfants sous l'élément parent :

var children = $('#parent > .child');

Ensuite, nous devons ajouter des écouteurs d'événements de clic pour chaque élément enfant. Nous pouvons le faire en utilisant la fonction each() de jQuery. Cette fonction accepte une fonction de rappel qui sera appliquée à chaque élément. Dans cette fonction de rappel, nous ajouterons un écouteur d'événement de clic pour augmenter le style de l'élément enfant :

children.each(function() {
  $(this).on('click', function() {
    $(this).addClass('clicked');
  });
});

Ici, nous utilisons la fonction on() de jQuery pour ajouter un écouteur d'événement de clic. Cette fonction accepte deux paramètres. Le premier est le type d'événement, nous avons utilisé "clic". Le deuxième paramètre est la fonction de rappel, qui est exécutée lorsque le clic répond. Dans cette fonction de rappel, nous appelons la fonction addClass() sur l'élément enfant pour ajouter la classe « cliqué » à l'élément enfant. Nous définissons une classe "cliquée" qui changera la couleur d'arrière-plan des éléments enfants.

Le code jQuery complet est le suivant :

$(document).ready(function() {

  var children = $('#parent > .child');

  children.each(function() {
    $(this).on('click', function() {
      $(this).addClass('clicked');
    });
  });

});

Enfin, nous mettons tout le code dans la fonction $(document).ready() et les exécutons une fois le DOM complètement chargé.

Conclusion

Dans cet article, nous avons appris à utiliser jQuery pour cliquer sur des éléments enfants et ajouter des styles. Nous devons sélectionner tous les éléments enfants, puis ajouter un écouteur d'événement de clic pour chaque élément enfant. Dans la fonction de rappel, nous pouvons utiliser la fonction addClass() pour ajouter une classe à l'élément enfant, afin de pouvoir ajouter différents styles à nos éléments enfants. Si vous souhaitez ajouter d'autres attributs d'éléments enfants, vous pouvez également apprendre et vous entraîner avec les écouteurs d'événements de clic.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!