jQuery评分系统的更正答案

【问题标题】：Correction for jQuery rating systemjQuery评分系统的更正
【发布时间】：2012-07-04 10:13:00
【问题描述】：

我想使用 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：

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

});

请有人告诉我代码有什么问题吗？

【问题讨论】：

对不起，我不知道调试java脚本。不能告诉你，你能看到代码中的任何错误吗？谢谢
打开您喜欢的浏览器并按 F12。这将打开开发人员工具。转到脚本控制台，看看是否出现任何错误。
好吧，如果我是你，我会从学习如何找到你遇到的 javascript 错误开始，或者编写 javascript 对你来说很难。我使用 FireBug - FireFox 浏览器的插件。
另请注意，在 Firefox 中，Tools > Web Developer > Error Console 中的错误控制台是您的朋友。
预期 ')' 在代码为星号的行) "px");

标签： php jquery mysql html ajax

【解决方案1】：

终于明白了。

    $(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");
}); 

});

希望这对其他有同样问题的人有所帮助。

【讨论】：

您的答案看起来基于丹麦哈希米。你应该给他点赞。只需确保将您的答案标记为已解决。
实际上我玩弄了代码并让它工作了，但是我投票赞成丹麦 hashmis 回答他的时间支持。

【解决方案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");
}); 

});

试试这个。

【讨论】：

没用，悬停不能正常工作，无论悬停位置如何，我都将前 3 颗星设为绿色。还是谢谢
你需要在index()函数后面加上*1，并尝试根据你需要的位置改变value值。

【解决方案3】：

var star = $(this).index() 1;

数字 1 应该在那里做什么？那应该是解析错误。

【讨论】：

var star = $(this).index()+1;我试过这样，没有解析错误。