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

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;
    }
   });
  });

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>

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;
    }

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;
      }
     });
    });

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!