JQuery implements click follow and cancel functions, while jquery implements click Cancel

JQuery implements click follow and cancel functions, while jquery implements click Cancel
Likes and network terms, indicating "agree" and "love ". This network language comes from the "like" function of the network community. The number of likes sent and received, the preference of likes, and so on can reflect to some extent what kind of person you are and what kind of status you are in. Behind the thumb ups, you are shown. The corresponding function is to cancel the function. It happens that a blogger is in an APP recently, and one of the sections needs to implement the like and cancel functions. After thinking about it, I decided to use JQuery code to implement it. This is just a simple change to the css style, okay, let's talk a little bit about it. Get it done !! First, 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 ("followed"); div. onOff = true ;}});});

The implementation result is as follows:

It can be seen that JS Code is easy to use. Similarly, image switching can also be achieved, as shown in figure

The implementation code is as follows:

Html:

<div class="div"></div>

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

This is just a simple demo. Great gods with better ideas can talk a lot.

Okay, this is the time to share this article.