我在我的网站上有这个评级系统,我正在尝试修改它以使用户能够为他们的服务评论提供“半星级”评级。我问的是,是否可以使用我目前的代码?
我的小提琴如下:
HTML:
<div class="rate-ex2-cnt">
<div id="1" class="rate-btn-1 rate-btn"></div>
<div id="2" class="rate-btn-2 rate-btn"></div>
<div id="3" class="rate-btn-3 rate-btn"></div>
<div id="4" class="rate-btn-4 rate-btn"></div>
<div id="5" class="rate-btn-5 rate-btn"></div>
</div>
CSS:
.clear{clear: both;}
.tuto-cnt{width: 480px; background-color: #fff; border:#ccc 1px solid; height:auto; min-height: 400px; margin: 40px auto; padding: 40px; overflow: auto; }
hr{ margin: 10px 0; border:none; border-top: #ccc 1px dotted;}
.rate-ex1-cnt{
width:225px; height: 40px;
border:#e9e9e9 1px solid;
background-color: #f6f6f6;
}
.rate-ex1-cnt .rate-btn{
width: 45px; height:40px;
float: left;
background: url(../img/rate-btn.png) no-repeat;
cursor: pointer;
}
.rate-ex1-cnt .rate-btn:hover, .rate-ex1-cnt .rate-btn-hover, .rate-ex1-cnt .rate-btn-active{
background: url(../img/rate-btn-hover.png) no-repeat;
}
.rate-ex2-cnt{
width:150px; height: 30px;
border:#e9e9e9 1px solid;
background-color: #f6f6f6;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.rate-ex2-cnt .rate-btn{
width: 30px; height:30px;
float: left;
background: url(http://s18.postimg.org/51iuu62d1/rate_btn2.png) no-repeat;
cursor: pointer;
}
.rate-ex2-cnt .rate-btn:hover, .rate-ex2-cnt .rate-btn-hover, .rate-ex2-cnt .rate-btn-active{
background: url(http://s22.postimg.org/l2jhmglml/rate_btn2_hover.png) no-repeat;
}
.rate-ex3-cnt{
width:85px; height: 17px;
border:#e9e9e9 1px solid;
background-color: #f6f6f6;
}
.rate-ex3-cnt .rate-btn{
width: 17px; height:17px;
float: left;
background: url(../img/rate-btn3.png) no-repeat;
cursor: pointer;
}
.rate-ex3-cnt .rate-btn:hover, .rate-ex3-cnt .rate-btn-hover, .rate-ex3-cnt .rate-btn-active{
background: url(../img/rate-btn3-hover.png) no-repeat;
}
/* rate result */
.rate-result-cnt{
width: 82px; height: 18px;
position: relative;
background-color: #ccc;
border: #ccc 0px solid;
}
.rate-result-cnt-all{
width: 82px; height: 18px;
position: relative;
background-color: #ccc;
border: #ccc 0px solid;
}
.rate-stars{
width: 82px; height: 18px;
background: url(../img/rate-stars.png) no-repeat;
position: absolute;
}
.rate-stars-all{
width: 82px; height: 18px;
background: url(../img/rate-stars-all.png) no-repeat;
position: absolute;
}
.rate-bg{
height: 18px;
background-color: #ffbe10;
position: absolute;
}
.rate-bg-all{
height: 18px;
background-color: #ffbe10;
position: absolute;
}
JS:
$(function(){
$('.rate-btn').hover(function(){
$('.rate-btn').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$('.rate-btn-'+i).addClass('rate-btn-hover');
};
});
$('.rate-btn').click(function(){
var therate = $(this).attr('id');
var dataRate = 'act=rate&post_id=1&rate='+therate; //
$('.rate-btn').removeClass('rate-btn-active');
for (var i = therate; i >= 0; i--) {
$('.rate-btn-'+i).addClass('rate-btn-active');
};
$.ajax({
type : "POST",
url : "zalian/rating_ajax.php",
data: dataRate,
success:function(){}
});
});
});
答案 0 :(得分:1)
我想出了this。
基本上使用fontAwesome而不是图片,并根据星形索引计算星数,这样你就不需要那么多的类了。
$('.rank-half').hover(function() {
var thisIndex = $(this).index(),
parent = $(this).parent(),
parentIndex = parent.index(),
ranks = $('.rank-container');
for (var i = 0; i < ranks.length; i++) {
if(i < parentIndex) {
$(ranks[i]).removeClass('half').addClass('full');
} else {
$(ranks[i]).removeClass('half').removeClass('full');
}
}
if(thisIndex == 0) {
parent.addClass('half');
} else {
parent.addClass('full');
}
});