<!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>