icône de changement jquery

Avec le développement continu de la technologie Internet, jQuery est devenu l'un des outils indispensables au développement front-end. La puissance de jQuery réside dans le fait qu’il fournit une multitude de fonctions et de méthodes qui peuvent nous aider à réaliser rapidement divers effets interactifs front-end.

Parmi eux, l'opération de changement d'icône est un effet que nous utilisons souvent. Dans cet article, nous expliquerons comment utiliser jQuery pour changer les icônes.

1. Importez le fichier jQuery

Tout d'abord, nous devons d'abord importer le fichier jQuery. Vous pouvez ajouter le code suivant dans la balise head :

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

La version jQuery3.5.1 est utilisée ici, vous pouvez choisir en fonction de vos propres besoins.

2. Créer une structure HTML

Ensuite, nous devons créer une structure HTML pour afficher l'icône qui doit être modifiée. Par exemple, nous pouvons utiliser le code suivant :

<div class="icon-container">
   <i class="fas fa-heart"></i>
</div>

Les icônes de Font Awesome sont utilisées ici, et vous pouvez les remplacer par d'autres icônes.

3. Écrivez du code jQuery

Maintenant, nous pouvons commencer à écrire du code jQuery. Tout d’abord, nous devons obtenir l’élément icône qui doit être modifié. Le code suivant peut être utilisé :

var icon = $('.icon-container i');

Ensuite, nous pouvons ajouter un événement click à l'élément icon pour changer l'icône au clic. Vous pouvez utiliser le code suivant :

icon.click(function() {
   if (icon.hasClass('fa-heart')) {
      icon.removeClass('fa-heart');
      icon.addClass('fa-thumbs-up');
   } else {
      icon.removeClass('fa-thumbs-up');
      icon.addClass('fa-heart');
   }
});

Dans ce code, nous déterminons l'état actuel de l'icône en déterminant si l'élément icon contient la classe fa-heart. S'il s'agit actuellement d'une icône en forme de cœur rouge, remplacez-la par une icône similaire ; s'il s'agit actuellement d'une icône similaire, remplacez-la par une icône en forme de cœur rouge.

4. Code complet

Ce qui suit est le code HTML et jQuery complet pour référence :

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


    

       
    
    
    <script>
    var icon = $('.icon-container i');

    icon.click(function() {
       if (icon.hasClass('fa-heart')) {
          icon.removeClass('fa-heart');
          icon.addClass('fa-thumbs-up');
       } else {
          icon.removeClass('fa-thumbs-up');
          icon.addClass('fa-heart');
       }
    });
    </script>

5.Résumé

Grâce à l'introduction de cet article, nous avons appris à utiliser jQuery pour changer les icônes. Bien sûr, ce n’est que la pointe de l’iceberg, jQuery possède de nombreuses autres fonctionnalités puissantes. J'espère que nous pourrons l'utiliser de manière flexible dans le développement réel afin d'améliorer l'efficacité du développement et d'obtenir de meilleurs résultats.

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!