我想使用jQuery,PHP和MySQL建立一个5星评级系统。 我正在关注this教程,但是我在jQuery部分遇到错误。 我擅长PHP和MySQL,但对jQuery和Ajax知之甚少。
jQuery代码:
$(function(){
$('.star').mouseover(function (){
var star = $(this).index() 1;
$(this).parent().css("background-position","0" - (32 * star) "px");
});
$('.star-rating').mouseout(function (){
var originalresult = $(this).attr('id').split('result')[1];
$(this).css("background-position","0 -" (32 * originalresult) "px");
});
});
HTML for this:
<div class="star-rating" id="rating1result0">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="result">
<span style="color:green">0</span> (0)
</div>
,CSS是:
.star-rating {
width: 80px;
height: 16px;
float: left;
background: url(_ls-global/images/layout-images/urating.png);
cursor: pointer;
}
.star {
width:16px;
height:16px;
float:left;
}
.result {
float:left;
height:16px;
color:#454545;
margin-left:5px;
line-height:110%;
}
我尝试更改这样的代码但得到了意想不到的结果。
$(function(){
$('.star').mouseover(function (){
var star = $(this).index()+1;
$(this).parent().css("background-position","32px");
});
$('.star-rating').mouseout(function (){
var originalresult = $(this).attr('id').split('result')[1];
$(this).css("background-position","32px");
});
});
有人可以告诉我代码中有什么问题吗?
答案 0 :(得分:2)
$(function(){
$('.star').mouseover(function (){
var star = $(this).index();
var newvalue =0-(32 * star);
$(this).parent().css("background-position",newvalue+" px");
});
$('.star-rating').mouseout(function (){
var originalresult = $(this).attr('id').split('result')[1];
var newvalue =0 -(32 * originalresult);
$(this).css("background-position",newvalue+"px");
});
});
试试这个。
答案 1 :(得分:2)
终于明白了。
$(function(){
$('.star').mouseover(function (){
var star = $(this).index()+1;
var x =(32 * star);
$(this).parent().css("backgroundPosition","0% " +(-x)+ "px");
});
$('.star-rating').mouseout(function (){
var originalresult = $(this).attr('id').split('result')[1];
var y =(32 * originalresult);
$(this).css("background-position","0%" +(-y)+ "px");
});
});
希望这有助于其他人遇到同样的问题。
答案 2 :(得分:0)
var star = $(this).index() 1;
那里应该做的数字1是什么?那应该是解析错误。