How JQuery implements the functions of click to follow and unfollow

Like, an Internet term that means "agree" and "love".

This Internet slang comes from the "like" function of online communities. The number of likes you send and receive, your preferences for giving likes, etc., can to some extent reflect who you are and what state you are in. Behind the likes, you are reflected. Corresponding to this is the cancel function. It just so happened that the blogger recently worked on an APP, and one of the sections needed to implement the like and cancel functions. After thinking about it, he decided to use JQuery code to implement it. Okay, without further ado, let’s get down to the practical stuff! !

First we need to introduce the JQuery plug-in

Secondly, we need to define a div and give it some styles

Then there is the JS code, as shown below

$(document) .ready(function(){

var onOff=true;

var div=$(".div");

div.click(function( ){

if (div.onOff) {

div.val("Follow me");

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

div.onOff = false;

} else {

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

div.val("Already followed");

div.onOff = true;

}

});

});

The effect is as follows

It can be seen that the JS code is easy to use, the same , you can also achieve the image switching effect as shown below

The implementation code is as follows

html:

##css: Pay attention to the image path

.div{

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

width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;

}

 

JS Code

$(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;

}

});

});

The above is the detailed content of How JQuery implements the functions of click to follow and unfollow. For more information, please follow other related articles on the PHP Chinese website!