<分区>
标签 javascript html css
<分区>
我正在构建这个评级系统，它恰好是这样的:
<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");
}
});
});
});
更新.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);
}
?>
它最高可达一颗星半，然后不再采用一半的值。它应该是一个需要星星的投票系统.. 谢谢!
最佳答案
你的类命名有错别字:HTML 中为“two-stars-half”，而 CSS 中为“two-stars-half”。 3.5 和 4.5 也一样。所以我猜你没有看到你的风格的良好视觉呈现。
关于javascript - javascript 和 css 的评级系统问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11328603/