javascript - 星级评定系统(半星)

Question

我的网站上有这个评级系统，我正在尝试修改它以使用户能够对他们的服务评论给予“半星”评级。我想问的是，我当前的代码是否可行？

我的 fiddle 如下:

demo

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

        });
    });     

Answer 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');
    }
});