WWW.lllT.neT

jQuery完成关注点赞加1的方式:1、导进jquery;2、设定HTML和CSS编码;3、根据编码“$(".liker").on("click",function(){...}”方式完成关注点赞加1实际效果就可以。

文中实际操作自然环境: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视频教程》

以上便是jQuery如何完成关注点赞加1的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:jQuery如何完成关注点赞加1发布于2021-12-13 17:09:01