使用带有 Fontawesome 的 jQuery UI 滑块更改星级

Posted 2023-03-13

【中文标题】使用带有 Fontawesome 的 jQuery UI 滑块更改星级

【英文标题】：Changing star rating by using jQuery UI slider with Fontawesome

【发布时间】：2016-05-11 20:11:39

【问题描述】：

我想在滑块值更改时更改右上角的星项目，例如当滑块值为 1 时应该有 1 星，对于值 2 应该有 2 星等等，直到 5 星保持如果可能，相同的 html 结构。我保留了slide: function() empty，因为当值发生变化时我不知道如何制作函数。

$(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 
	margin-bottom: 10px;
  padding: 50px 20px;


.control-group .controls 
	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>

【参考方案1】：

加了两颗星，然后我这样做了：

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

【讨论】：

嗨，谢谢你，但实际上我不是在看这个结果。我希望在 html <i class="fa fa-star"></i> 中更改而不是 fa-star-o，如果值为 1，则为 1 个 fa-star，如果值为 2，则为 2 个 fa-star，如果值为 3，则为 html 中的 3 个 fa-star ，最高 5 星级，价值 5。