更正jQuery評分系統

我想使用jQuery，PHP和MySQL構建5星評級系統。我正在關注this教程，但我在jQuery部分發生錯誤。我擅長PHP和MySQL，但對jQuery和Ajax知之甚少。更正jQuery評分系統

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

});

請有人可以向我推薦代碼中出了什麼問題？

來源

2012-07-04 Tall boY

你得到的錯誤是什麼？ – Jon

我很抱歉，但我不知道調試Java腳本。不能告訴你，你能看到代碼中的任何錯誤。謝謝 –

打開你最喜歡的瀏覽器，然後按F12。這將打開開發人員工具。轉到腳本控制檯，看看是否有任何錯誤出現。 –

終於明白了。

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

});

希望這有助於他人有同樣的問題。

來源

2012-07-04 14:28:42

你的答案看起來基於丹麥hashmis。你應該讓他高興。只要確保將您的答案標記爲已解決。 – Thomas

其實我打了代碼，並得到它的工作，但我已經投票丹麥hashmis回答他的時間支持。 –

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

數字1應該在那裏做什麼？這應該是解析錯誤。

來源

2012-07-04 10:45:23 xatzistnr

var star = $（this）.index（）+ 1;我試過這樣，並沒有解析錯誤。 –

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

});

試試這個。

來源

2012-07-04 11:59:08

沒有工作，懸停工作不正常，我得到第一個3星級綠色不尊重懸停位置。謝謝 –

你需要在index（）函數後面添加* 1，並根據所需的位置嘗試更改值的值。 –

更正jQuery評分系統

回答

相關問題