0

私はこのような評価システムを構築しています:

  <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);
}
?>

それは 1 つ星 1 つ半まで機能し、もう半分の値は必要ありません。それは星を取る投票システムであるはずです..ありがとう！

4

1 に答える 1

1

クラスの命名にタイプミスがあります。HTML では「two-stars-half」、CSS では「two-stars-half」です。3.5 と 4.5 も同じです。だから、あなたのスタイルの視覚的なレンダリングがうまくいかないと思います.

于 2012-07-04T12:10:33.370 に答える