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>

 

posted @ 2019-07-04 11:52  夏小夏吖  阅读(699)  评论(0)  编辑  收藏  举报