Maison > Article > interface Web > jquery implémente le changement d'icône de collection

jquery implémente le changement d'icône de collection

王林original: 2023-05-28 10:44:09600parcourir

Dans le développement front-end, il est souvent nécessaire d'utiliser certains effets interactifs, tels que le changement d'icône préférée. L'icône de collection est une fonctionnalité courante sur les sites Web ou les applications. Elle permet aux utilisateurs de collecter rapidement leur contenu préféré et offre aux utilisateurs une meilleure expérience. Nous présenterons ensuite comment utiliser jquery pour changer d'icône préférée.

1. Créer une page HTML

Tout d'abord, nous devons créer une page HTML simple pour afficher l'icône de collection et simuler la fonction de collection. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <title>jquery实现收藏图标切换</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>收藏图标切换</h1>
    <div id="collection">
      <img src="uncollect.png" alt="uncollected" id="uncollected"
        width="50" height="50">
      <img src="collected.png" alt="collected" id="collected"
        width="50" height="50" style="display:none;">
    </div>
    <button id="collect-btn">收藏</button>
  </body>
</html>

Dans cette page HTML, nous avons créé un conteneur div qui contient deux balises img, qui sont utilisées pour afficher respectivement les icônes non collectées et collectées. Afin d'obtenir l'effet de commutation des icônes, nous avons ajouté l'attribut de style « display:none ; » aux icônes collectées, ce qui signifie que l'icône est masquée dans son état initial. En parallèle, nous avons également créé un bouton sur la page pour simuler la fonction de collecte.

2. Implémenter le changement d'icône

Ensuite, nous utilisons jquery pour obtenir l'effet de changement d'icône. Le code spécifique est le suivant :

$(function() {
  // 收藏按钮的点击事件
  $("#collect-btn").click(function() {
    // 获取已收藏和未收藏的图标
    var uncollected = $("#uncollected");
    var collected = $("#collected");
    // 判断已收藏图标是否显示
    if (collected.is(":visible")) {
      // 如果已收藏图标显示，则切换成未收藏图标
      collected.hide();
      uncollected.show();
    } else {
      // 如果未收藏图标显示，则切换成已收藏图标
      uncollected.hide();
      collected.show();
    }
  });
});

Dans ce code, nous utilisons d'abord le sélecteur jquery pour obtenir les icônes collectées et non collectées, puis décidons vers quelle icône basculer en jugeant si l'icône collectée est affichée. Si l'icône préférée est affichée, l'icône préférée est masquée et l'icône non préférée est affichée ; si l'icône non préférée est affichée, l'icône non préférée est masquée et l'icône préférée est affichée.

3. Affichage de l'effet

Enfin, jetons un coup d'œil à l'effet. Ouvrez cette page HTML dans le navigateur, cliquez sur le bouton Favoris et vous pourrez voir l'effet de changement d'icône.

Ce qui précède explique comment utiliser jquery pour changer d'icône préférée. Grâce à cet exemple, nous pouvons apprendre à utiliser jquery pour créer des effets interactifs et améliorer l'expérience utilisateur d'un site Web ou d'une application. Si vous êtes intéressé par le développement front-end, vous souhaiterez peut-être vous entraîner davantage et apprendre en profondeur.

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!

jquery html 选择器 display

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery remplace la valeur du contenuArticle suivant：jquery remplace la valeur du contenu

Articles Liés

Voir plus