Maison > interface Web > js tutoriel > le corps du texte

Implémentation jQuery d'exemples de fonctions de suivi et d'annulation de clic

小云云
Libérer: 2018-01-06 09:13:56
original
2673 Les gens l'ont consulté

Cet argot Internet vient de la fonction « j'aime » des communautés en ligne. Le nombre de likes que vous envoyez et recevez, vos préférences en matière de likes, etc., peuvent dans une certaine mesure refléter qui vous êtes et dans quel état vous vous trouvez. Derrière les likes, vous vous reflètez. À cela correspond la fonction d’annulation. Il se trouve que le blogueur a récemment travaillé sur une application et que l'une des sections était nécessaire pour implémenter les fonctions like et Cancel. Après y avoir réfléchi, il a décidé d'utiliser le code JQuery pour l'implémenter.

Nous devons d'abord introduire le plug-in JQuery

Deuxièmement, nous devons définir un p et lui donner quelques styles

Ensuite, il y a le code JS, comme indiqué ci-dessous

$(document).ready(function(){
  var onOff=true;
  var p=$(".p");
  p.click(function(){  
    if (p.onOff) {
     p.val("关注我");
     p.css({"background":'#ccc'});
     p.onOff = false;
    } else {
     p.css({"background":'red'});
      p.val("已关注");
     p.onOff = true;
    }
   });
  });
Copier après la connexion

L'effet est le suivant

Le code JS visible est facile à utiliser. De même, vous pouvez également obtenir l'effet de changement d'image comme indiqué ci-dessous

Le code d'implémentation est le suivant

html :

<p class="p"></p>
Copier après la connexion

css : Faites attention au chemin de l'image

.p{
     background-image: url(img/guanzhu.png);
     width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;
    }
Copier après la connexion

Code JS

$(document).ready(function(){
    var onOff=true;
    var p=$(".p");
    p.click(function(){  
      if (p.onOff) {
       p.css({"background-image":'url(img/guanzhu.png)'});
       p.onOff = false;
      } else {
       p.css({"background-image":'url(img/yiguanzhu.png)'});
       p.onOff = true;
      }
     });
    });
Copier après la connexion

Recommandations associées :

Résumé des précautions pertinentes concernant la vérification

Explication de la fonction de suivi

10 articles recommandés sur les événements de suivi

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal