首页 > 其他 > 详细

JQ简单点赞功能

时间:2019-07-04 13:58:09      阅读:120      评论:0      收藏:0      [点我收藏+]
<!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>

 

JQ简单点赞功能

原文:https://www.cnblogs.com/fkcqwq/p/11131566.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!