jQuery implementation of click follow and cancel function examples

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 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.

First we need to introduce the JQuery plug-in

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

Then there is the JS code, as shown below

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

The effect is as follows

Visible JS code It is easy to use. Similarly, you can also achieve the image switching effect as shown below

The implementation code is as follows

html:

<p class="p"></p>

css: Pay attention to the image path

.p{
     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 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;
      }
     });
    });

Related recommendations:

Summary of relevant precautions about verification

Explanation of the following function

10 recommended articles about following events

The above is the detailed content of jQuery implementation of click follow and cancel function examples. For more information, please follow other related articles on the PHP Chinese website!