jq 'like' and 'dislike' code sharing

Like and dislike JQ to achieve
The style is as follows:


js code part: <script type="text/javascript"><br /> $(function () {<br /> ​​​​ //Change the background style when the mouse slides towards and away from the voting button<br />          $("#dig_up").hover(function () {<br />                $(this).addClass("digup_on");<br />           }, function () {<br />               $(this).removeClass("digup_on");<br />          });<br />          $("#dig_down").hover(function () {<br />               $(this).addClass("digdown_on");<br />           }, function () {<br />                $(this).removeClass("digdown_on");<br />          });<br />                   // Get article ID<br />           var aid = "{$article.art_id}";<br />               //Initialization data<br />         getdata("/votes/aid/" + aid);<br /> <br /> //Method of action when clicking "Like"<br />          $("#dig_up").click(function () {<br />                 //Choose one of the two methods<br />                    //getdata("{:U('Index/votes',array('action'=>'like'))}",aid);<br />              getdata("/votes/action/like/aid/" + aid);<br />          });<br />                  // Action method when clicking "Dislike"<br />          $("#dig_down").click(function () {<br />                //Choose one of the two methods<br />                     //getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);<br />              getdata("/votes/action/unlike/aid/" + aid);<br />          });<br /> });<br /> Function getdata(url, aid) {<br />           $.getJSON(url, {aid: aid}, function (data) {<br /> If (data.success == 1) {<br />                      $("#num_up").html(data.like);<br />                  $("#bar_up span").css("width", data.like_percent);<br />                   $("#bar_up i").html(data.like_percent);<br />                     $("#num_down").html(data.unlike);<br />                    $("#bar_down span").css("width", data.unlike_percent);<br />                   $("#bar_down i").html(data.unlike_percent);<br />                     } else {<br />                  $("#msg").html(data.msg).show().css({'opacity': 1, 'top': '40px'}).animate({<br />                       top: '-50px',<br />Opacity: 0<br />                   }, "slow");<br />              }<br />          });<br /> }<br /> </script>HTML code part:
Please adjust the specific CSS style according to your actual situation<div class="digg"> <br>                                                                                                                                                                                                                                              <div id="dig_up" class="digup"> <br>                                                                                                                                                                                                                                                                                                           in <p>Well written, I appreciate it! </p> <br>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 <div id="dig_down" class="digdown"> <br>                                                                                                                                                                                                                                                                                                in <p>Too bad! </p> <br>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <div id="msg"></div> <br> </div> <br>CSS code part: <br>.digg{width:530px;margin:20px auto;position:relative}<br> #dig_down,#dig_up{width:200px;height:48px;margin:10px;position:relative;border:1px solid #d3d3d3;padding-left:42px;cursor:pointer;float:left}<br> .digup{background:url(../../images/diggs.png) no-repeat 4px 2px}<br> .digup_on{background:url(../../images/diggs.png) no-repeat 4px -49px}<br> .digdown{background:url(../../images/diggs.png) no-repeat 4px -102px} .digdown_on{background:url(../../images/diggs.png) no-repeat 4px -154px}<code class="prettyprint linenums lang-php"> #num_down,#num_up{position:absolute;right:6px;top:18px;font-size:20px}<br> #dig_up p{height:24px;line-height:24px;color:#360}<br> #dig_down p{height:24px;line-height:24px;color:#f30}<br> .bar{width:100px;height:12px;line-height:12px;border:1px solid #f0f0f0;position:relative;text-align:center}<br> .bar span{display:block;height:12px}<br> .bar i{position:absolute;top:0;left:104px}<br> #bar_up span{background:#360}<br> #bar_down span{background:#f60}<br> #msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}<br>diggs.png Image attachment has been uploaded <br> <br> diggs.png <br>( 2.48 KB Download: 4 times )<br> <br>