評級系統問題與JavaScript和CSS

Question

我建立這個評級系統恰好是這樣的：

<span class="ratelinks" id="<?php echo $star['id'];?>"> 
    <li><a href="javascript:void(0)" title="1 star out of 5" class="one-star">1</a></li> 
    <li><a href="javascript:void(0)" title="1 star and a half out of 5" class="one-star-half">1.5</a></li> 
    <li><a href="javascript:void(0)" title="2 stars out of 5" class="two-stars">2</a></li> 
    <li><a href="javascript:void(0)" title="2 star and a half out of 5" class="two-star-half">2.5</a></li> 
    <li><a href="javascript:void(0)" title="3 stars out of 5" class="three-stars">3</a></li> 
    <li><a href="javascript:void(0)" title="3 star and a half out of 5" class="three-star-half">3.5</a></li> 
    <li><a href="javascript:void(0)" title="4 stars out of 5" class="four-stars">4</a></li> 
    <li><a href="javascript:void(0)" title="4 star and a half out of 5" class="four-star-half">4.5</a></li> 
    <li><a href="javascript:void(0)" title="5 stars out of 5" class="five-stars">5</a></li> 
    </span> 

這個特定代碼的CSS是：

/* CSS Document */ 
body{ 
    font:12px Arial, Helvetica, sans-serif; 
    padding:40px; 
} 
.star-rating, 
.star-rating a:hover, 
.star-rating a:active, 
.star-rating .current-rating{ 
background: url(star.gif) left -1000px repeat-x; 
} 
.star-rating{ 
position:relative; 
width:125px; 
height:25px; 
overflow:hidden; 
list-style:none; 
margin:0; 
padding:0; 
background-position: left top; 
} 
.star-rating li{ 
display: inline; 
} 
.star-rating a, 
.star-rating .current-rating{ 
position:absolute; 
top:0; 
left:0; 
text-indent:-1000em; 
height:25px; 
line-height:25px; 
outline:none; 
overflow:hidden; 
border: none; 
} 
.star-rating a:hover, 
.star-rating a:active{ 
background-position: left bottom; 
} 
.star-rating a.one-star{ 
width:20%; 
z-index:12; 
} 
.star-rating a.one-star-half{ 
width:30%; 
z-index:11; 
} 
.star-rating a.two-stars{ 
width:40%; 
z-index:10; 
} 
.star-rating a.two-stars-half{ 
width:50%; 
z-index:9; 
} 
.star-rating a.three-stars{ 
width:60%; 
z-index:8; 
} 
.star-rating a.three-stars-half{ 
width:70%; 
z-index:7; 
} 
.star-rating a.four-stars{ 
width:80%; 
z-index:6; 
} 
.star-rating a.four-stars-half{ 
width:90%; 
z-index:5; 
} 
.star-rating a.five-stars{ 
width:100%; 
z-index:4; 
} 
.star-rating .current-rating{ 
z-index:1; 
background-position: left center; 
} 

JS文件代碼：

// JavaScript Document 
    $(document).ready(function() { 
     // get rating function 
     function getRating(id){ 
      $.ajax({ 
       type: "GET", 
       url: "update.php", 
       data: "do=getrate&id="+id, 
       cache: false, 
       async: false, 
       success: function(result) { 
        // apply star rating to element 
        $("#current-rating-"+id+"").css({ width: "" + result + "%" }); 
       }, 
       error: function(result) { 
        alert("some error occured, please try again later"); 
       } 
      }); 
     } 

     // link handler 
     $('.ratelinks li a').click(function(){ 
      // get the parent id 
      var idStar = $(this).parent().parent().attr('id'); 
      $.ajax({ 
       type: "GET", 
       url: "update.php", 
       data: "rating="+$(this).text()+"&do=rate&id="+idStar, 
       cache: false, 
       async: false, 
       success: function(result) { 
        // remove #ratelinks element to prevent another rate 
        $("#ratelinks").remove(); 
        // get rating after click 
        getRating(idStar); 
       }, 
       error: function(result) { 
        alert("some error occured, please try again later"); 
       } 
      }); 

     }); 
    }); 

Update.php

<?php 
// connect to database 
$dbh=mysql_connect ("localhost", "root", "") or die ('Cannot connect to the database'); 
mysql_select_db ("rating",$dbh); 

if($_GET['do']=='rate'){ 
    // do rate 
    rate($_GET['id']); 
}else if($_GET['do']=='getrate'){ 
    // get rating 
    getRating($_GET['id']); 
} 

// get data from tabel 
function fetchStar(){ 
    $sql = "select * from `vote`"; 
    $result=@mysql_query($sql); 
    while($rs = @mysql_fetch_array($result,MYSQL_ASSOC)){ 
     $arr_data[] = $rs; 
    } 
    return $arr_data; 
} 

// function to retrieve 
function getRating($id){ 
    $sql= "select * from `vote` where id='".$id."' "; 
    $result=@mysql_query($sql); 
    $rs=@mysql_fetch_array($result); 
    // set width of star 
    $rating = (@round($rs[value]/$rs[counter],1)) * 20; 
    echo $rating; 
} 

// function to insert rating 
function rate($id){ 
    $text = strip_tags($_GET['rating']); 
    $update = "update `vote` set counter = counter + 1, value = value + ".$_GET['rating']." where id='".$id."' "; 

    $result = @mysql_query($update); 
} 
?> 

它可以工作到一星半，那麼它不再佔用一半的值。它應該是一個需要星星的投票系統.. 謝謝！

Answer 1

喲在你的班級中有一個錯字：HTML中的「two-star-half」和CSS中的「two-star-half」。 3.5和4.5也是一樣的。所以我想你沒有看到你的風格的良好視覺渲染。