jQuery实现点击关注和取消功能


Posted in jQuery onJuly 03, 2017

点赞,网络用语,表示“赞同”、“喜爱”。

该网络语来源于网络社区的“赞”功能。送出和收获的赞的多少、赞的给予偏好等,在某种程度能反映出你是怎样的人以及处于何种状态。点赞的背后,反映出你自己。与之对应的便是取消功能。恰巧最近博主在一款APP,其中一个版块需要实现点赞和取消功能,经过思考决定用JQuery代码实现它,好了废话不多说,上干货!!

首先要引入JQuery插件

jQuery实现点击关注和取消功能

其次,我们需要定义一个div,并给它一些样式

jQuery实现点击关注和取消功能

jQuery实现点击关注和取消功能

 然后就是JS代码了,如下所示

$(document).ready(function(){
  var onOff=true;
  var div=$(".div");
  div.click(function(){  
    if (div.onOff) {
     div.val("关注我");
     div.css({"background":'#ccc'});
     div.onOff = false;
    } else {
     div.css({"background":'red'});
      div.val("已关注");
     div.onOff = true;
    }
   });
  });

实现效果如下

jQuery实现点击关注和取消功能

可见JS代码是好用的,同样的,也可以实现图片切换效果如下图

jQuery实现点击关注和取消功能

其实现代码如下

html:

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

css:注意图片路径

.div{
     background-image: url(img/guanzhu.png);
     width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;
    }

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

以上所述是小编给大家介绍的jQuery实现点击关注和取消功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
You might like
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python3实现点餐系统
2019/01/24 Python
python3 线性回归验证方法
2019/07/09 Python
python批量处理文件或文件夹
2020/07/28 Python
Python定时器线程池原理详解
2020/02/26 Python
Python新手学习raise用法
2020/06/03 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
给老婆道歉的话
2015/01/20 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
创业计划书之寿司
2019/07/19 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python