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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
javascript 函数调用规则
2009/08/26 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Python深入学习之内存管理
2014/08/31 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
django 单表操作实例详解
2019/07/30 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python中get和post有什么区别
2020/06/19 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
关于抽烟的检讨书
2014/02/25 职场文书
优秀广告词大全
2014/03/19 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2014年就业工作总结
2014/11/26 职场文书
关于远足的感想
2015/08/10 职场文书
导游词之山西-五老峰
2019/10/07 职场文书