- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 用jQuery怎样实现心型点赞加一的效果？
用jQuery怎样实现心型点赞加一的效果？
Admin 2022-01-18 群英技术资讯 1311 次浏览
这篇文章给大家分享的是用jQuery怎样实现心型点赞加一的效果。对于点赞的功能想必大家都不陌生吧，下文给大家介绍一下简单的实现点赞效果的示例，感兴趣的朋友可以参考，接下来就跟随小编一起了解看看吧。
本文操作环境：Windows7系统、jquery-3.3.1版、DELL G3电脑
jQuery怎么实现点赞加1？
Jquery一个简单的点赞效果，实现点赞数+1
1、导入JS
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
2、CSS代码
a{
text-decoration:none ;
color: #999999;}.red{
color: red;}3、HTML代码
<p>王思葱竟然也是舔狗？<a href="#"><span class="liker">999</span></a></p>
<p>震惊，一名科学家发现每刷一分钟抖音，人的生命就会减少60秒！<a href="#"><span class="liker">520</span></a></p>
4、JS代码
$(function(){
//点赞
$(".liker").on("click",function(){
// 判断是否已经点赞过
if($(this).hasClass("red")){
return
}
//添加样式 并且数字+1
$(this).addClass("red")
var num=$(this).html().substring(1)
num++
$(this).html(""+num)
//ajax更新数据
})}) 运行…
单击小爱心后
以上就是关于是用jQuery实现心型点赞的效果的介绍，本文只是提供了一种实现思路，代码仅供参考，需要的朋友可以了解看看，当然，这里没有写后台交互的代码，想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自PHP中文网
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
vuex是如何使用的？一文带你了解vuex的简单实现
vuex是如何使用的？vuex是一个专为vue.js应用程序开发的状态管理模式，是用来管理组件之间通信的一个插件。文本主要介绍的就是vuex的使用。
-
Vue中v-on参数的具体使用是怎样，有哪些要注意
这篇文章主要介绍了聊聊vue 中的v-on参数问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
-
JavaScript编译原理怎样理解，包括哪些内容
本篇文章给大家带来了关于javascript的相关知识，其中主要整理了编译原理的相关问题，Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，下面一起来看一下，希望对大家有帮助。
-
jQuery判断class是否存在的方法操作是什么
在jquery中，可以使用hasClass()方法来判断是否有某个class，该方法的作用就是检查被选元素是否包含指定的class，语法“$(selector).hasClass(classname)”。
-
React怎样创建和使用组件？
这篇文章主要介绍 React中组件的类别以及如何创建和使用组件，对新手学习React有一定的帮助，有这方面学习需要的朋友可以解决参考，接下来小编带着大家一起了解看看。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
