jquery 编写 顶 和踩 功能

首先我们在页面上放置“顶”和“踩”的按钮，即 #dig_up和#dig_down，按钮上分别记录了投票的票数以及所占的百分比。

<div class = "digg" > 

     <div id= "dig_up" class = "digup" >

         <span id= "num_up" ></span>

         <p>很好，很强大！</p>

         <div id= "bar_up" class = "bar" ><span></span><i></i></div>

     </div>

        <div id= "dig_down" class = "digdown" >

         <span id= "num_down" ></span>

         <p>太差劲了！</p>

         <div id= "bar_down" class = "bar" ><span></span><i></i></div>

     </div>

     <div id= "msg" ></div>

</div>

$( function (){

     //当鼠标悬浮和离开两个按钮时，切换按钮背景样式

     $( "#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" );

     });

      

     //初始化数据

     getdata( "ajax.php" ,1);

      

     //单击“顶”时

     $( "#dig_up" ).click( function (){

         getdata( "ajax.php?action=like" ,1);

     });

     //单击“踩”时

     $( "#dig_down" ).click( function (){

         getdata( "ajax.php?action=unlike" ,1);

     });

});