简单点赞按钮的实现

最新推荐文章于 2024-04-18 09:10:58 发布
最新推荐文章于 2024-04-18 09:10:58 发布
阅读量3.1k 收藏 8
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinQiaoJieDuPian/article/details/81705493
版权
这篇博客介绍了如何实现每个图片点赞按钮的独立计数功能。在初始的JavaScript实现中，由于变量num的全局作用域导致点赞数在不同图片间叠加。通过引入闭包的概念，将num置于独立的作用域内，确保了每个图片的点赞计数互不影响。文章还简要阐述了闭包的定义和作用，强调了正确使用闭包避免多次声明局部变量的重要性。
摘要由CSDN通过智能技术生成

实现效果
需求：每个图片下的按钮点击事件是独立的，点赞数量的叠加互不影响

html函数代码
这里写图片描述
按照常规逻辑js代码（错误）
这里写图片描述
会发现问题：下一张图片的点赞数不是从1开始，而是从上一张图片点赞数开始叠加

原因：num值一直处于叠加状态

解决方案：通过闭包的思想，将每一个存储点赞数的num值放在独立的空间里，从而实现点赞数量的叠加互不影响

正确js代码

最低0.47元/天 解锁文章
_银翘解毒片_
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css跳动的心(点赞按钮样式）
rouduo_zjy的博客
12-11 1556
利用css实现❤的跳动 //html代码 <div id="heart"> <div class="left"></div> <div class="right"></div> </div> //css代码 #heart{ width:300px; height:300px; margin:0 auto;...
有趣的css - 点赞爱心动效按钮
设计师工作日常
04-07 1653
用css实现一个丝滑Q弹的爱心点赞按钮动效。
微服务SpringBoot 整合Redis 实现点赞、点赞排行榜_spring boot 如何优雅实现点赞数(1)
最新发布
kenzsoft的博客
04-18 429
因为每个数据是不允许重复的，当用户操作完成后，无论如何操作，都是有且仅有一条记录。(img-r9t5mvuN-1713402586795)]RestFul 风格，传入id，通过指定注解接受即可。为何采用Set 集合？
简单点赞效果html,jQuery实现的超简单点赞效果实例分析
weixin_36432451的博客
06-03 258
本文实例讲述了jQuery实现的超简单点赞效果，分享给大家供大家参考，具体如下：1.HTML(可以优化一下，尽量少些几个标签.....)1超赞2推荐3一般6无聊5雷囧2.css样式#dianz{text-align:center; width:610px; overflow:hidden;zoom:1; margin:20px auto;}#dianz b{ display:inline-bloc...
点赞按钮功能及效果插件
01-15
点赞按钮功能，显示+1和判断重复点击效果
js实现点赞按钮功能
Wangdiankun的博客
02-11 5003
js实现点赞按钮功能，包括只能点赞一次，超过一次时提示文字（3秒后消失），点击时次数加一（给后端传值在这里解决）。 没有按钮加图片，只用了改变颜色来表示 首先明确html页面代码 <span id="tixing0" ></span> <div class="dianzan_11"> <div class="dianzan_font...
点赞的php代码和css、,jQuery和CSS3实现点赞功能
weixin_30759083的博客
03-26 286
本篇文章主要介绍了jQuery+CSS3实现点赞功能的示例代码。具有很好的参考价值。下面一起来看下吧效果图：图(1) 初始图图(2) 点击后代码如下：jQuery+CSS3文章点赞功能代码body{margin:0;padding:0;}.text-content{min-width:1180px;border-bottom: 1px solid #e7e7e7;border-top: 1px s...
js实现简单点赞操作
01-19
JavaScript实现点赞操作：（练手·初级），供大家参考，具体内容如下 前期准备： ① 导入jQuery文件； ② 导入bootstrap文件； ③ 点赞图片； <!DOCTYPE html> <html> <head> <meta charset=...
jQuery实现的超简单点赞效果实例分析
12-28
本文实例讲述了jQuery实现的超简单点赞效果，分享给大家供大家参考，具体如下： 1.HTML（可以优化一下，尽量少些几个标签…..） <b class=cz>1<i></i><s></s><u>超赞</u></b> <b class=tj>2<i...
简单点的tabl四按钮切换
07-25
本教程将介绍一个简单的四按钮Tab切换的实现方法，非常适合初学者上手实践。 首先，我们需要理解Android的TabLayout组件。TabLayout是Android Design Support Library的一部分，它提供了一个用于显示标签的视图，...
javascript代码_网页点赞代码（javascript）
weixin_39631344的博客
11-22 409
第一种方法（常规）： 思路：①、在html代码中写入类型为button类型按钮，并给一个id名为praise ②、在js代码块中声明一个变量number并赋值0 ③、通过id属性查找点赞按钮(praise)并绑定点击事件(click) ④、将自增的value的值赋给按钮(praise)中的value属性<!第二种（推荐）： 思路：和上述类似，区别是将this....
点赞效果及功能代码
01-08
点赞的动画效果 使用UIControl定义
jQuery点赞功能代码.zip
05-23
jQuery点赞功能代码，当用户看到自己喜欢的图片或文章时，点击“红心”按钮，增加记录点击数。
js实现点赞按钮功能的实例代码
10-15
主要介绍了js实现点赞按钮功能,本文通过实例代码给大家介绍的非常详细，对大家的工作或学习具有一定的参考借鉴价值，需要的朋友可以参考下
LikeButton常见得点赞效果
05-27
效果图地址 http://blog.csdn.net/qq_34709056/article/details/72779577
php点赞效果的制作代码+解析（jQuery+Ajax+PHP实现“赞”）
热门推荐
37度2
03-28 3万+
数据库设计 先准备两张表，pic表保存的是图片信息，包括图片对应的名称、路径以及图片“赞”总数，pic_ip则记录用户点击赞后的IP数据。 CREATE TABLE IF NOT EXISTS `pic` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pic_name` varchar(60) NOT NULL, `pic_url`
android 微信点赞功能,Android 仿微信点赞和评论弹出框
weixin_29193259的博客
05-25 846
wjntekaqskfhwktpgpvzhp1. 微信弹出框微信朋友圈的点赞和评论功能，有2个组成部分：左下角的“更多”按钮；点击该按钮后弹出的对话框； 微信朋友圈点赞和评论功能2. 实际效果本文将建一个 ListView，在其 Item 中简单模仿微信的布局，然后着重实现弹出窗，忽略具体布局细节。具体效果如下： 3. 知识点知识点清单：4. 美工素材由于 .apk 本质上是个压缩包，我们可以通过...
vue点赞功能代码
weixin_30254435的博客
11-05 1933
之前公司做评论，第一次用cookie做点赞。游客点赞，把数据提交到后台，同时存到cookie中，一天只能点一次 created() { // 首页获取cookie 有没有点赞过 this.cookieInit('useids') }, methods: { 　　cookieInit(name) { // 初始化cookie if...
简单点赞效果html,js实现点赞效果
06-09
同时，按钮的文字会变为“取消赞”，并将点击事件绑定到 `unlike()` 函数上。`unlike()` 函数与 `like()` 函数类似，但会将点赞数减1，并将按钮的文字和点击事件恢复为原来的状态。 注意：这只是一个简单的示例，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值