菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>红心点赞</title> <link href="//cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet"> <!--[if gte IE 9]><!--> <script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> <!--<![endif]--> <!--[if lt IE 9]> <script src="//cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="/public/demos/heart/style2.css" /> </head> <body> <article class="htmleaf-container"> <div id="container"> <h3>点击下面的红心查看效果！</h3> <div class="feed" id="feed1"> <p>W3C </p> <div class="heart" id="like1"></div> <div class="likeCount" id="likeCount1">14</div> </div> <div class="feed" id="feed2"> <p>百度一下</p> <div class="heart" id="like2"></div> <div class="likeCount" id="likeCount2">10</div> </div> </div> </article> <script type="text/javascript"> $(document).ready(function(){ $('#container').on("click",'.heart',function(){ var messageID=$(this).attr("id").split("like")[1], C=parseInt($("#likeCount"+messageID).html()); $(this).css("background-position","") if($(this).hasClass('like')){ $("#likeCount"+messageID).html(C+1); $(this).addClass("heartAnimation").removeClass("like"); }else{ $("#likeCount"+messageID).html(C-1); $(this).removeClass("heartAnimation").addClass("like"); $(this).css("background-position","left"); } }); }); </script> </body> </html>
运行结果