FontWesomeでjQuery UIスライダを使用して星の評価を変更する

Question

スライダの値が1のときに右上の星の項目を変更したい場合は、値1の場合は1つ、値2の場合は2つ可能であれば、同じHTML構造を維持している5つ星までのように。値が変更されたときに関数を作成する方法がわからないので、私はslide: function() {}を空にしておいた。

$(document).ready(function() { 
 
    $('.slider-rating').slider({ 
 
    range: true, 
 
    min: 1, 
 
    max: 5, 
 
    values: [3, 5], 
 
    slide: function() { 
 

 
    } 
 
    }); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 
@import 
 
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'); 
 
@import 
 
url('https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css'); 
 

 
.control-group { 
 
\t margin-bottom: 10px; 
 
    padding: 50px 20px; 
 
} 
 

 
.control-group .controls { 
 
\t margin: 5px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<div class="control-group"> 
 
    <div class="control-top clearfix"> 
 
    <div class="control-title pull-left">Ratings</div> 
 
    <div class="control-percentage pull-right"> 
 
     <span class="slider-rating-label"> 
 
     <i class="fa fa-star"></i> 
 
     <i class="fa fa-star"></i> 
 
     <i class="fa fa-star"></i> 
 
     </span> 
 
    </div> 
 
    </div> 
 
    <div class="controls"> 
 
    <div class="slider slider-rating"></div> 
 
    </div> 
 
</div>

Answer 1

追加した2つの星と、私はこれをしなかった：

$(document).ready(function() { 
    $('.slider-rating').slider({ 
    range: true, 
    min: 1, 
    max: 5, 
    values: [3, 5], 
    slide: function(x,y) { 
     var stars = $('.slider-rating-label').find('i'); 
     //clear all 
     $.each(stars, function (index, value) { 
      $(value).removeClass().addClass('fa fa-star-o'); 
     }); 
     //fill by slider value 
     for (var i = 0; i < y.value; i++) { 
      $(stars[i]).removeClass().addClass('fa fa-star'); 
     } 
    } 
    }); 
});