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!