Comment JQuery réalise-t-il les fonctions de clic pour suivre et ne plus suivre

Comme, un terme Internet qui signifie « d'accord » et « aimer ».

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 le type de personne que vous êtes et l'état dans lequel 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 l'une des sections nécessaires 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. Bon, sans plus tarder, allons-y. place aux choses pratiques ! !

Tout d'abord, nous devons introduire le plug-in JQuery

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

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

$(document) .ready(function(){

var onOff=true;

var div=$(".div");

div.click(function( ){

if (div.onOff) {

div.val("Suivez-moi");

div.css({" background":'#ccc' });

div.onOff = false;

} else {

div.css({"background":'red'} );

div.val("Déjà suivi");

div.onOff = true;

}

});

});

L'effet de mise en œuvre est le suivant

On peut voir que le code JS est facile à utiliser, de même, vous pouvez également obtenir l'effet de changement d'image comme indiqué ci-dessous

La mise en œuvre le code est le suivant

html :

css : Faites attention au chemin de l'image

.div{

background-image : url(img/guanzhu.png);

width : 100px; hauteur : 40 px ; taille de l'arrière-plan : 80 px ; répétition de l'arrière-plan : non-répétition ;

}

Code JS

$(document).ready(function(){

var onOff=true;

var div=$(".div");

div.click( function(){

if (div.onOff) {

div.css({"background-image":'url(img/guanzhu.png)'});

div.onOff = false;

} else {

div.css({"background-image":'url(img/yiguanzhu.png)'});

div.onOff = true;

}

});

});

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!