我有以下 jQuery 渲染 5 星,可能有也可能没有点亮金色。它位于 RadPopupWindow (Telerik) 中。您可以从一个页面单击并接收此弹出窗口和代码,一切都按预期工作。从另一个页面,它会呈现用户的投票和链接“删除我的投票”一瞬间,然后它就消失了。所以它一半有效,一半无效。
<script type="text/javascript">
$(document).ready(function () {
//if they've already voted, show the stars
var nbrStarsVoted = $('#<%= hdfStarRating.ClientID %>').val();
if (nbrStarsVoted > 0) {
$('#removeVote').text('Remove my vote');
//show stars, then addClass jQuery-ratings-full to light up the right amount of stars
$('#starRating div:lt(' + nbrStarsVoted + ')').addClass('jquery-ratings-full');
}
//add correct class to star they've clicked on, and the ones before it
$('.jquery-ratings-star').click(function () {
$(this)
.prevAll().addBack().addClass('jquery-ratings-full').end().end()
.nextAll().removeClass('jquery-ratings-full');
//make (this) be what's stored in the hiddenfield for postback (casting the vote)
$('#<%= hdfStarRating.ClientID %>').val(this.id);
});
//remove their vote
$('#removeVote').click(function () {
$('#starRating div:lt(' + nbrStarsVoted + ')').removeClass('jquery-ratings-full');
$('#removeVote').hide();
$('#<%= hdfStarRating.ClientID %>').val(0);
});
});
</script>
这里是 HTML 和 CSS。我已经在 jsFiddle、Codepen 中对其进行了测试,一切都很好。只是从一页到下一页它没有。有任何想法吗?
<div style="float: left" id="starRating">
<div class="jquery-ratings-star" id="1"></div>
<div class="jquery-ratings-star" id="3"></div>
<div class="jquery-ratings-star" id="4"></div>
<div class="jquery-ratings-star" id="5"></div>
</div>
CSS:
<style type="text/css">
.jquery-ratings-star {
width: 16px;
height: 16px;
background-image: url('/../ESDNET/Images/Icons/star_disabled.png');
background-repeat: no-repeat;
position: relative;
float: left;
margin-right: 2px;
}
.jquery-ratings-full {
background-image: url('/../ESDNET/Images/Icons/star.png');
}
</style>
我应该指出,弹出页面上有一个 RadScriptManager,而且整个网站都有 Telerik。显然,我是第一个尝试将 jQuery 加入其中的人,但它一点也不运行良好。