星級評級系統（星半）

Question

我已經在我的網站這個評級系統，我試圖修改它，使用戶能夠給他們的服務的審查「半星」評級。我問的是，我現在的代碼有可能嗎？

我的小提琴低於：

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; 
} 

記者：

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