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中有“两星半”，而你的CSS中有“两星半”。 3.5和4.5也是如此。所以我猜你没有看到你的风格的良好视觉呈现。

使用javascript和css评分系统问题

1 个答案: