js-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注
效果:

HTML:
<div class="rightBtn cur">+关注</div>
CSS:
.rightBtn{
width: 80px;
height: 30px;
background: rgba(200, 200, 200, 1);/*灰色*/
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
cursor: pointer;
}
.cur {
background: #FB452F;
}
.rightBtn:hover {
background: #FF5844;
}
.cur:hover {
background: #FF5844;
}
JS:
$(".rightBtn").click(function(){
let flag=$(this).hasClass("hh");
if(flag){
$(this).text("+关注")
$(this).addClass("cur")
$(this).removeClass("hh")
}else{
// $(this).addClass()
$(this).text("已关注")
$(this).addClass("hh")
$(this).removeClass("cur")
}
})
$(".rightBtn").mouseover(function(){
let flag=$(this).hasClass("hh");
console.log(flag,888)
if(flag){
$(this).text("取消关注")
}else{
$(this).text("+关注")
}
})
$(".rightBtn").mouseout(function(){
let flag=$(this).hasClass("hh");
if(flag){
$(this).text("已关注")
}
})
JS:代码截图,便于看代码

js-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注的更多相关文章
- js点击加载更多可以增加几条数据的显示
<div class="list"> <div class="one"> <div class="img" ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- 关于关注和取消关注的nodejs写法
本例子的关注和取消关注,是通过ajax的方法实现的:nodejs后台写好api接口:响应前台的ajax 先看ajax的代码实现: // 用户关注标签 function subscribe(uid, t ...
- 转:JS线程和JS阻塞页面加载的问题
前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- 性能优化之html、css、js三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
- Yii 1开发日记 -- Ajax实现点击加载下一页
功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...
- js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
随机推荐
- 【Linux开发】linux设备驱动归纳总结(二):模块的相关基础概念
linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10.04 开发平台:S3C2440开发板 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- Angular build编译内存溢出"JavaScript heap out of memory"的解决办法
关于最近使用angular build编译打包的时候,遇到内存溢出的突发情况,做一个简单记录 编译报错如下↓↓↓ 报错信息很直观地指出是内存溢出了.是什么导致了内存溢出呢?其根本原因在于 nodejs ...
- VNC 设置分辨率 --TigerVNC
之前写过如何设置vnc https://www.cnblogs.com/jinanxiaolaohu/p/9110002.html 如果想设置vnc的分辨率的话 也很简单 如图示: vncserver ...
- 小菜鸟之oracle数据字典
oracle数据字典 一.数据字典 数据字典是oracle存放有关数据库信息的地方,几乎所有的系统信息和对象信息都可在数据字典中进行查询.数据字典是oracle数据库系统的信息核心,它是一组提供有关数 ...
- Docker部署前后端项目
本地(ubuntu19.04)安装docker: sudo apt install docker.io SSH连接服务器: 安装Docker: yum update yum -y install do ...
- ARM Cortex-M 系列 MCU 错误追踪库 心得
一. 感谢CmBacktrace开源项目,git项目网站:https://github.com/armink/CmBacktrace 二. 移植CmBacktrace 2.1 准备好CmBacktra ...
- Centos8 重启网卡方法
问题情况: 1.虚机centos8 修改为静态ip后,由于网卡网段变更,无法上网 2.最小化安装,没有ifconfig 3.firewalld,selinux关闭 4.ping 不通物理机 根本原因: ...
- Linux就该这么学——新手必须掌握的命令之我的第一个命令
1.Linux操作系统的开机进程(基本过程) (1).内核的引导: BIOS自检,安装BIOS默认设置的启动设备(硬盘)来启动.读取目录/boot目录下的内核文件 (2).运行init: 运行init ...
- 04: redis集群
1.1 主从同步 1.CPA原理 1. CPA原理是分布式存储理论的基石: C(一致性): A(可用性): P(分区容忍性); 2. 当主从网络无法连通时,修改操作无法同步到节点,所以“一致性” ...
- Codeforces 1221B. Knights
传送门 看到棋盘上跳马,发现如果把棋盘黑白染色,那么每次移动都是从白点到黑点,从黑点到白点 所以直接根据黑白染色判断每个位置的马的颜色即可 #include<iostream> #incl ...