Теперь, если еще не отдано ни одного голоса, мой сценарий рейтинга не будет работать в Internet Explorer. Я не смогу щелкнуть звездочку и ввести ее значение в базу данных и отобразить в браузере.
Но если уже подан один голос, скрипт отлично работает в Internet Explorer.
Как я могу решить эту проблему, чтобы, если еще не отдано ни одного голоса, пользователи Internet Explorer могли первыми ввести голоса?
Я думаю, что моя кодировка JQuery создает проблему, поэтому я покажу ее и мою HTML-разметку.
Я использую PHP, JQuery и MySQL.
JQuery код
// JavaScript Document
$(document).ready(function() {
// get average rating
getRatingText();
// get average rating function
function getRatingText(){
$.ajax({
type: "GET",
url: "update.php",
data: "do=getavgrate",
cache: false,
async: false,
success: function(result) {
// add rating text
$("#rating-text").text(result);
},
error: function(result) {
alert("some error occured, please try again later");
}
});
}
// get current rating
getRating();
// get rating function
function getRating(){
$.ajax({
type: "GET",
url: "update.php",
data: "do=getrate",
cache: false,
async: false,
success: function(result) {
// apply star rating to element dynamically
$("#current-rating").css({ width: "" + result + "%" });
// add rating text dynamically
$("#rating-text").text(getRatingText());
},
error: function(result) {
alert("some error occured, please try again later");
}
});
}
// link handler
$('#ratelinks li a').click(function(){
$.ajax({
type: "GET",
url: "update.php",
data: "rating="+$(this).text()+"&do=rate",
cache: false,
async: false,
success: function(result) {
// remove #ratelinks element to prevent another rate
$("#ratelinks").remove();
// get rating after click
getRating();
},
error: function(result) {
alert("some error occured, please try again later");
}
});
});
});
HTML-разметка
<ul class='star-rating'>
<li class="current-rating" id="current-rating"><!-- will show current rating --></li>
<li id="ratelinks">
<ul>
<li><a href="javascript:void(0)" title="1 star out of 10" class="one-star">1</a></li>
<li><a href="javascript:void(0)" title="2 stars out of 10" class="two-stars">2</a></li>
<li><a href="javascript:void(0)" title="3 stars out of 10" class="three-stars">3</a></li>
<li><a href="javascript:void(0)" title="4 stars out of 10" class="four-stars">4</a></li>
<li><a href="javascript:void(0)" title="5 stars out of 10" class="five-stars">5</a></li>
<li><a href="javascript:void(0)" title="6 stars out of 10" class="six-star">6</a></li>
<li><a href="javascript:void(0)" title="7 stars out of 10" class="seven-stars">7</a></li>
<li><a href="javascript:void(0)" title="8 stars out of 10" class="eight-stars">8</a></li>
<li><a href="javascript:void(0)" title="9 stars out of 10" class="nine-stars">9</a></li>
<li><a href="javascript:void(0)" title="10 stars out of 10" class="ten-stars">10</a></li>
</ul>
</li>
</ul>