Question

我已经使用此脚本https://github.com/antennaio/jquery-bar-rating，您可以在其中完善演示：http://antenna.io/demo/jquery-bar-rating/examples/

将星号的百分比改为元素中的百分比？

从演示中我有这个代码：

<div class="br-wrapper br-theme-fontawesome-stars-o">
    <div class="br-widget">
        <a href="#" data-rating-value="1" data-rating-text="1" class="br-selected"></a>
        <a href="#" data-rating-value="2" data-rating-text="2" class="br-selected"></a>
        <a href="#" data-rating-value="3" data-rating-text="3" class="br-selected br-current"></a>
        <a href="#" data-rating-value="4" data-rating-text="4" class="br-fractional br-fractional-60"></a>
        <a href="#" data-rating-value="5" data-rating-text="5"></a>
    </div>
</div>

现在我不想这样做：

<div class="br-wrapper br-theme-fontawesome-stars-o">
    <div class="br-widget">
        <a href="#" data-rating-value="1" data-rating-text="1" class="br-selected"></a>
        <a href="#" data-rating-value="2" data-rating-text="2" class="br-selected"></a>
        <a href="#" data-rating-value="3" data-rating-text="3" class="br-selected br-current"></a>
        <a href="#" data-rating-value="4" data-rating-text="4" class="br-fractional br-fractional-60" style="width:48%"></a>
        <a href="#" data-rating-value="5" data-rating-text="5"></a>
    </div>
</div>

我在这里找到了https://jsfiddle.net/vco9r2rt/4/但我无法整合它。我希望你能帮助我。

Answer 1

使用Font Owesome进行评级，您可以按照以下方式进行操作

＆＃13;

// Starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;

(function($, window) {
    var Starrr;

    Starrr = (function() {
        Starrr.prototype.defaults = {
            rating: void 0,
            numStars: 5,
            change: function(e, value) {}
        };

        function Starrr($el, options) {
            var i, _, _ref,
                _this = this;

            this.options = $.extend({}, this.defaults, options);
            this.$el = $el;
            _ref = this.defaults;
            for (i in _ref) {
                _ = _ref[i];
                if (this.$el.data(i) != null) {
                    this.options[i] = this.$el.data(i);
                }
            }
            this.createStars();
            this.syncRating();
            this.$el.on('mouseover.starrr', 'i', function(e) {
                return _this.syncRating(_this.$el.find('i').index(e.currentTarget) + 1);
            });
            this.$el.on('mouseout.starrr', function() {
                return _this.syncRating();
            });
            this.$el.on('click.starrr', 'i', function(e) {
                return _this.setRating(_this.$el.find('i').index(e.currentTarget) + 1);
            });
            this.$el.on('starrr:change', this.options.change);
        }

        Starrr.prototype.createStars = function() {
            var _i, _ref, _results;

            _results = [];
            for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
                _results.push(this.$el.append("<i class='fa fa-star-o'></i>"));
            }
            return _results;
        };

        Starrr.prototype.setRating = function(rating) {
            if (this.options.rating === rating) {
                rating = void 0;
            }
            this.options.rating = rating;
            this.syncRating();
            return this.$el.trigger('starrr:change', rating);
        };

        Starrr.prototype.syncRating = function(rating) {
            var i, _i, _j, _ref;

            rating || (rating = this.options.rating);
            if (rating) {
                for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
                    this.$el.find('i').eq(i).removeClass('fa-star-o').addClass('fa-star');
                }
            }
            if (rating && rating < 5) {
                for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
                    this.$el.find('i').eq(i).removeClass('fa-star').addClass('fa-star-o');
                }
            }
            if (!rating) {
                return this.$el.find('i').removeClass('fa-star').addClass('fa-star-o');
            }
        };

        return Starrr;

    })();
    return $.fn.extend({
        starrr: function() {
            var args, option;

            option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
            return this.each(function() {
                var data;

                data = $(this).data('star-rating');
                if (!data) {
                    $(this).data('star-rating', (data = new Starrr($(this), option)));
                }
                if (typeof option === 'string') {
                    return data[option].apply(data, args);
                }
            });
        }
    });
})(window.jQuery, window);

$(function() {
    return $(".starrr").starrr();
});

$( document ).ready(function() {
      
  $('#stars').on('starrr:change', function(e, value){
    $('#count').html(value);
  });
  
  $('#stars-existing').on('starrr:change', function(e, value){
    $('#count-existing').html(value);
  });
});

＆＃13;

/* FontAwesome for working BootSnippet :> */
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
    <div class="row lead">
        <div id="stars" class="starrr"></div>
        You gave a rating of <span id="count">0</span> star(s)
	</div>
    
    <div class="row lead">
        <p>Also you can give a default rating by adding attribute data-rating</p>
        <div id="stars-existing" class="starrr" data-rating='4'></div>
        You gave a rating of <span id="count-existing">4</span> star(s)
    </div>
</div>

＆＃13;

Answer 2

您提到的脚本（https://github.com/antennaio/jquery-bar-rating）似乎已经提供了您正在寻找的功能。

甚至有一个例子（参见它可用于显示分数星级。）

http://antenna.io/demo/jquery-bar-rating/examples/

相关代码：

      <div class="col col-fullwidth">
        <div class="star-ratings">
          <p>It can be used to display fractional star ratings.</p>
          <div class="stars stars-example-fontawesome-o">
            <select id="example-fontawesome-o" name="rating" data-current-rating="5.6">
              <option value=""></option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
            <span class="title current-rating">
              Current rating: <span class="value"></span>
            </span>
            <span class="title your-rating hidden">
              Your rating: <span class="value"></span>&nbsp;
              <a href="#" class="clear-rating"><i class="fa fa-times-circle"></i></a>
            </span>
          </div>
        </div>
      </div>

重要的部分是：

数据电流评级= “5.6”

结果：

Answer 3

<link href="http://antenna.io/demo/jquery-bar-rating/dist/themes/fontawesome-stars-o.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://antenna.io/demo/jquery-bar-rating/dist/jquery.barrating.min.js"></script>

<div class="br-wrapper br-theme-fontawesome-stars-o">
	<div class="br-widget">
		<a href="#" data-rating-value="1" data-rating-text="1" class="br-selected"></a>
		<a href="#" data-rating-value="2" data-rating-text="2" class="br-selected"></a>
		<a href="#" data-rating-value="3" data-rating-text="3" class="br-selected br-current"></a>
		<a href="#" data-rating-value="4" data-rating-text="4" class="br-fractional br-fractional-60"></a>
		<a href="#" data-rating-value="5" data-rating-text="5"></a>
	</div>
</div>

现在我在这篇文章中插入了我的代码。在这段代码中，我无法插入像它这样有效的https://jsfiddle.net/vco9r2rt/4/。我想设计我的文件fontawesome-stars-o.css的星星我需要5颗星，在php变量中我的速率就像这样$ rate = 4.6

Font Awesome百分比星形图标

3 个答案: