JQ “頂”和“踩”代碼分享

廢話不多說請看代碼
js代碼部分：


<script type="text/javascript">
    $(() => {
        // 滑鼠滑向和離開投票按鈕時，變換背景樣式
        $("#dig_up").hover(function () {
            $(this).addClass("digup_on");
        }, function () {
            $(this).removeClass("digup_on");
        });
        $("#dig_down").hover(function () {
            $(this).addClass("digdown_on");
        }, function () {
            $(this).removeClass("digdown_on");
        });
        // 獲得文章ID
        var aid = "{$article.art_id}";
        // 初始化數據
        getdata("/votes/aid/" + aid);
        // 單擊“頂”時動作方法
        $("#dig_up").click(function () {
            //兩種方法選其一
            //getdata("{:U('Index/votes',array('action'=>'like'))}",aid);
            getdata("/votes/action/like/aid/" + aid);
        });
        // 單擊“踩”時動作方法
        $("#dig_down").click(function () {
            //兩種方法選其一
            //getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);
            getdata("/votes/action/unlike/aid/" + aid);
        });
    });
    function getdata(url, aid) {
        $.getJSON(url, {aid: aid}, (data) => {
            if (data.success == 1) {
                $("#num_up").html(data.like);
                $("#bar_up span").css("width", data.like_percent);
                $("#bar_up i").html(data.like_percent);
                $("#num_down").html(data.unlike);
                $("#bar_down span").css("width", data.unlike_percent);
                $("#bar_down i").html(data.unlike_percent);
            } else {
                $("#msg").html(data.msg).show().css({'opacity': 1, 'top': '40px'}).animate({
                    top: '-50px',
                    opacity: 0
                }, "slow");
            }
        });
    }
</script>

HTML代碼部分：

具體CSS樣式根據自己的實際情況調整吧

<div class="digg">
        <div id="dig_up" class="digup">
            <span id="num_up">133</span>
            <p>寫的好，我很贊！</p>
            <div id="bar_up" class="bar"><span style="width:68%"></span><i>68%</i></div>
        </div>
        <div id="dig_down" class="digdown">
            <span id="num_down">42</span>
            <p>太差勁了！</p>
              <div id="bar_down" class="bar"><span style="width:32%"></span><i>32%</i></div>
        </div>
        <div id="msg"></div>
</div>

CSS代碼部分：

.digg{width:530px;margin:20px auto;position:relative}
#dig_down,#dig_up{width:200px;height:48px;margin:10px;position:relative;border:1px solid #d3d3d3;padding-left:42px;cursor:pointer;float:left}
.digup{background:url(../../images/diggs.png) no-repeat 4px 2px}
.digup_on{background:url(../../images/diggs.png) no-repeat 4px -49px}
.digdown{background:url(../../images/diggs.png) no-repeat 4px -102px}
.digdown_on{background:url(../../images/diggs.png) no-repeat 4px -154px}
#num_down,#num_up{position:absolute;right:6px;top:18px;font-size:20px}
#dig_up p{height:24px;line-height:24px;color:#360}
#dig_down p{height:24px;line-height:24px;color:#f30}
.bar{width:100px;height:12px;line-height:12px;border:1px solid #f0f0f0;position:relative;text-align:center}
.bar span{display:block;height:12px}
.bar i{position:absolute;top:0;left:104px}
#bar_up span{background:#360}
#bar_down span{background:#f60}
#msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}