欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

JQ简单点赞功能

发布时间:2025/5/22 编程问答 28 豆豆
生活随笔 收集整理的这篇文章主要介绍了 JQ简单点赞功能 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>JQ简单点赞功能</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <style>.lala{color:#999;margin:10vh;cursor:pointer;} </style> <div class="lala noStyle"><span class="number">89</span><span class="heart"></span> </div><script>$(function(){var numberText=parseInt($(".number").text());$(".lala").click(function(){if($(this).hasClass("noStyle")){numberText+=1;$(this).find(".heart").css("color","red");$(this).find(".number").html(numberText);$(this).find(".number").css("color","red");$(this).removeClass("noStyle");}else{numberText-=1;$(this).find(".heart").css("color","#999");$(this).find(".number").html(numberText);$(this).find(".number").css("color","#999");$(this).addClass("noStyle");}})}) </script></body></html>

 

转载于:https://www.cnblogs.com/fkcqwq/p/11131566.html

总结

以上是生活随笔为你收集整理的JQ简单点赞功能的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。