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

2024-11-26 17:56:19

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

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

首先要引入JQuery插件

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

然后就是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;
    }
   });
  });

实现效果如下

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

其实现代码如下

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实现点击关注和取消功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

本文总结述了15个值得开发人员关注的jQuery开发技巧和心得.非常精辟实用!分享给大家供大家参考,具体如下: 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新.最好的方法来提高性能就是使用最新版本的jQuery.每一个新的版本都包含了优化的bug修复.对我们来说唯一要干的就是修改tag,何乐而不为呢? 我们也可以使用免费的CDN服务,例如, Google来存放j
关注jquery技巧提高jquery技能(前端开发必学)

一个简单技巧的集合,帮你提升 jQuery 技能. Matt Smith 发起的一个小项目,目前已有 14 个小技巧.伯乐在线会持续跟进更新. 回到顶部按钮预加载图片检查图片是否加载完毕自动修复损坏的图片 Hover 上的 Class 开关禁用 input 字段停止链接加载淡入淡出/滑动开关简单的折叠效果将两个 Div 设为相同高度在新窗口打开外部链接找到文本元素切换可视与隐藏的触发器回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方
jquery心形点赞关注效果的简单实现

html代码 <div class="stage"> <div class="heart"></div> </div> css代码 .heart { width: 100px; height: 100px; background: url("") no-repeat; background-position: 0 0; cursor: pointer; -webkit-transition: bac
jQuery实现点击关注和取消功能

点赞,网络用语,表示"赞同"."喜爱". 该网络语来源于网络社区的"赞"功能.送出和收获的赞的多少.赞的给予偏好等,在某种程度能反映出你是怎样的人以及处于何种状态.点赞的背后,反映出你自己.与之对应的便是取消功能.恰巧最近博主在一款APP,其中一个版块需要实现点赞和取消功能,经过思考决定用JQuery代码实现它,好了废话不多说,上干货!! 首先要引入JQuery插件其次,我们需要定义一个div,并给它一些样式然后就是JS代码了,如下所示 $(
jQuery代码实现表格中点击相应行变色功能

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
jQuery实现点击行选中或取消CheckBox的方法

本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法.分享给大家供大家参考,具体如下: /// <summary> /// 点击行选中或者取消CheckBox /// </summary> /// <param name="TableID">表ID</param> function SetCheckBox_Check(TableID) { var $TableID = TableID == "" ? &
jquery实现表格中点击相应行变色功能效果【实例代码】

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解

先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里. 代码在这https://github.com/zgzczzw/ZHFollowButton 前几天发现知乎关注的点击效果确实赞,查了一下实现方式,刚好看到这个问题,花了一天时间终于把这个效果实现了,现在来回答一下,很不幸,楼上各位的答案都不全对,且听我一一道来. 首先,我先详细观察了一些知乎的效果,其中有一个很神奇的地方,如图: 注意看第二张图,这个圆形在扩散的时候,圆形底下的字还在,而且新的
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】

本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能.分享给大家供大家参考,具体如下: 原理参考前面一篇<JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能>,小编顺便对原文区域外点击bug进行了修改,具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
vue实现点击关注后及时更新列表功能

如图,我要实现点击关注之后列表及时更新成最新的列表. 思路很简单,主要是两点: 1.在点击关注之后去执行一个请求新的关注列表的action: 2.在vue组件中watch监听已关注列表和推荐关注列表主要代码如下: 组件: 关注的methods: followMethod(item){ if(this.token){ this.$store.dispatch('follow',{followUserId:item.pubId,page:this.page,size:this.size}); th
jQuery实现点击图标div循环放大缩小功能

很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面) 图片.png 图片.png <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=&quo
jQuery实现的点击按钮改变样式功能示例

本文实例讲述了jQuery实现的点击按钮改变样式功能.分享给大家供大家参考,具体如下: 1. css代码:index4.css @CHARSET "UTF-8"; .sd{ font-weight: bold; color: black; background: red; } 2. jsp代码:index4.jsp <%@ page language="java" import="java.util.*"pageEncoding="
基于jQuery实现仿QQ空间送礼物功能代码

我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人.我们只要把鼠标放到如下图的生日快乐那标签上,就会显示可以给该人送的礼物!! 如下图所示: 单击其中的一个礼物,就会马上送出去.但是我们现在是要说的还有单击更多的时候,会另外弹出一个新的窗口在当前页面最前面!如下图显示: 怎么实现那上面的功能呢? 就是把鼠标放上去,弹出一天tips,单击tips里面的控件,之后弹出另外一个弹出框. 网上就会有很多比较好的插件,就先到网上去找了相对应的jquery插件. jquery中tips的有很多插件,

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

相关推荐

随机推荐