将价值绑定到星级(Bind value to star rating)

我在我的网络应用程序中使用星级评分系统。我在获取星级的先前评级值时遇到问题。如果用户之前已经评级过[4]。它必须通过四星闪烁显示。目前我正在保存数据库中的用户投票并重新获得费率值。但我不知道如何将Rating值绑定到star。

这是我的代码：CSS

.stars on{background:url(../image/star_on.gif) no-repeat;} .stars li{ float:left; width:17px; height:17px; background-image: url( '../image/ratingStarEmpty.gif' ); list-style-type:none; transition:all 0.2s linear; } .stars:hover li{ background-image: url(../image/ratingStarFilled.gif); } .stars li:hover ~ li{ background-image: url( '../image/ratingStarEmpty.gif' ); }

Jquery返回的星值

$.ajax({ type: "POST", url:'User/UserHome.aspx/BindInner', data: '{id:'+ id +'}', contentType: "application/json; charset=utf-8", dataType: "json", cache: false, success: function(msg) { var xmlDoc = $.parseXML(msg.d); var xml = $(xmlDoc); innpageCount = parseInt(xml.find("innerPageCount").eq(0).find("innerPageCount").text()); var inncommonload = xml.find("InnerCommentonload"); // $("#MainBox"+id).find("#dvCustomers1 table").remove(); inncommonload.each(function () { var sno=inncommonload.find("SNo").text(); var rate=inncommonload.find("Rating").text(); var star='<ul class="stars"><li class="starvalue" id="1star'+sno+'" onclick="AnsMark('+sno+',1); return false;"><a></a></li><li class="starrr" id="2star'+sno+'" onclick="AnsMark('+sno+',2); return false;"></li><li class="starrr" id="3star'+sno+'" onclick="AnsMark('+sno+',3); return false;"></li><li class="starrr" id="4star'+sno+'" onclick="AnsMark('+sno+',4); return false;"></li><li class="starrr" id="5star'+sno+'" onclick="AnsMark('+sno+',5); return false;"></li></ul>'; }); }, failure: function (msg) { alert(msg.d); }, error: function (msg) { alert(msg.d); } });

I am using a star rating system in my web application. I am having problem in fetching previously rated value to star's. If user have rated previously [4]. It must be displayed through four star blink. Currently I am saving user vote in database and retriving the rate value. But I don't know how to bind the Rating value to star.

Here's My Code: CSS

.stars on{background:url(../image/star_on.gif) no-repeat;} .stars li{ float:left; width:17px; height:17px; background-image: url( '../image/ratingStarEmpty.gif' ); list-style-type:none; transition:all 0.2s linear; } .stars:hover li{ background-image: url(../image/ratingStarFilled.gif); } .stars li:hover ~ li{ background-image: url( '../image/ratingStarEmpty.gif' ); }

Jquery That Return's Star value

$.ajax({ type: "POST", url:'User/UserHome.aspx/BindInner', data: '{id:'+ id +'}', contentType: "application/json; charset=utf-8", dataType: "json", cache: false, success: function(msg) { var xmlDoc = $.parseXML(msg.d); var xml = $(xmlDoc); innpageCount = parseInt(xml.find("innerPageCount").eq(0).find("innerPageCount").text()); var inncommonload = xml.find("InnerCommentonload"); // $("#MainBox"+id).find("#dvCustomers1 table").remove(); inncommonload.each(function () { var sno=inncommonload.find("SNo").text(); var rate=inncommonload.find("Rating").text(); var star='<ul class="stars"><li class="starvalue" id="1star'+sno+'" onclick="AnsMark('+sno+',1); return false;"><a></a></li><li class="starrr" id="2star'+sno+'" onclick="AnsMark('+sno+',2); return false;"></li><li class="starrr" id="3star'+sno+'" onclick="AnsMark('+sno+',3); return false;"></li><li class="starrr" id="4star'+sno+'" onclick="AnsMark('+sno+',4); return false;"></li><li class="starrr" id="5star'+sno+'" onclick="AnsMark('+sno+',5); return false;"></li></ul>'; }); }, failure: function (msg) { alert(msg.d); }, error: function (msg) { alert(msg.d); } });