jquery aime et annule les effets

Avec l’essor des réseaux sociaux, les likes sont devenus un moyen populaire de socialisation. Qu’il s’agisse d’une plateforme de médias sociaux, d’un blog, d’un site Web ou d’une application mobile, les likes sont devenus un élément essentiel de nombreuses applications de sites Web. WordPress, Weibo, WeChat, Facebook, Zhihu et d'autres plateformes offrent toutes aux utilisateurs la fonction J'aime, qui ajoute de l'interactivité et de l'activité au fonctionnement du site Web.

Dans cet article, nous apprendrons comment implémenter les effets J'aime et Annuler jQuery, intégrer la fonction J'aime sur le site Web et améliorer l'expérience d'interaction utilisateur.

Tout d’abord, nous devons préparer quelques travaux préparatoires. Dans cet exemple, nous allons créer un bouton J'aime légèrement plus simple. Nous avons besoin de code HTML :

<div class="like">
  <span class="count">10</span>
  <a href="#" class="like-btn">点赞</a>
</div>

Nous pouvons utiliser les styles CSS habituels pour embellir l'apparence du bouton J'aime et du compteur.

La deuxième étape consiste à écrire le script jQuery. Ici, nous devons traiter la surveillance des événements de clic et des statuts similaires.

Introduisez d'abord la bibliothèque jQuery en HTML :

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

Ensuite, écrivez le script jQuery :

$(document).ready(function() {
 
  // 初始化点赞状态
  var isLiked = false;
 
  // 初始化点赞计数器
  var count = 10;
 
  // 绑定点赞按钮点击事件
  $('.like-btn').click(function() {
 
    if (isLiked) {
      // 取消点赞状态
      isLiked = false;
      // 更新按钮文案
      $(this).text('点赞');
      // 更新点赞计数器
      $('.count').text(--count);
    } else {
      // 添加点赞状态
      isLiked = true;
      // 更新按钮文案
      $(this).text('取消');
      // 更新点赞计数器
      $('.count').text(++count);
    }
 
  });
 
});

Analysons le code ligne par ligne :

// 初始化点赞状态
var isLiked = false;

Nous utilisons une variable pour suivre le statut actuel du like, false</ code> Indique que les likes ne sont pas sélectionnés. <code>false 表示点赞未被选中。

// 初始化点赞计数器
var count = 10;

创建一个计数器，设置点赞数最初为 10。

// 绑定点赞按钮点击事件
$('.like-btn').click(function() {

使用 jQuery 选择器来选中页面中的点赞按钮，并在点击事件上绑定一个回调函数。

if (isLiked) {
  // 取消点赞状态
  isLiked = false;
  // 更新按钮文案
  $(this).text('点赞');
  // 更新点赞计数器
  $('.count').text(--count);
} else {
  // 添加点赞状态
  isLiked = true;
  // 更新按钮文案
  $(this).text('取消');
  // 更新点赞计数器
  $('.count').text(++count);
}

按顺序处理按钮的单击事件。我们检查 isLiked 的值，如果它是 false 表示当前按钮没有被选中，那么在处理函数中将其设置成 true。我们更新按钮文本，更新计数器的值，然后将 isLiked 设置为 true

});

Créez un compteur et fixez le nombre de likes à 10 dans un premier temps.

<div class="like">
  <span class="count">10</span>
  <button class="like-btn">点赞</button>
</div>

Utilisez le sélecteur jQuery pour sélectionner le bouton J'aime sur la page et lier une fonction de rappel à l'événement de clic.

rrreee

Gérez les événements de clic sur les boutons de manière séquentielle. Nous vérifions la valeur de isLiked et si elle est false ce qui signifie que le bouton actuel n'est pas sélectionné, nous le définissons sur true dans la fonction de gestionnaire. Nous mettons à jour le texte du bouton, mettons à jour la valeur du compteur et définissons isLiked sur true. Cela fera face à une autre boucle conditionnelle jusqu'à ce que le statut similaire ne soit plus disponible.

rrreee

Complétez la fonction de traitement des événements de clic et terminez la fermeture.

Enfin, nous pouvons activer notre bouton J'aime de la manière suivante : 🎜rrreee🎜Le style du bouton rendu dans l'exemple peut être embelli via CSS. De plus, nous pouvons également styliser le comptoir. 🎜🎜En résumé, vous pouvez modifier le style, ajouter des fonctions et ajuster la logique du code en fonction de vos besoins pour vous adapter aux pages de votre site Web. 🎜

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!