星级插件问题

Question

我正在使用这个插件来创建一个简单的星级评分系统-> http://antenna.io/demo/jquery-bar-rating/examples/

工作得很好，直到我被卡住了..我遵循了文档，并创建了一个包含一些精选项的div。

​

$('#skills').barrating({
    theme: 'fontawesome-stars',
    initialRating: null,
    onSelect: function(value, text, event) {
      if (typeof(event) !== 'undefined') {
        // rating was selected by a user
        val = $(event.target).data("rating-value");
        console.log(val);
      }
    }
  });

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/jquery.barrating.min.js"></script>
<select id="skills">
     <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>
    </select>

<select id="communication">
     <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>
    </select>

<select id="quality">
     <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>
    </select>

​

我是这样使用脚本的：

  $('#skills').barrating({
    theme: 'fontawesome-stars',
    initialRating: null,
    onSelect: function(value, text, event) {
      if (typeof(event) !== 'undefined') {
        // rating was selected by a user
        val = $(event.target).data("rating-value");
        console.log(val);
      }
    }
  });

正如您在OnSelect函数上看到的，我能够获得用户选择的星级值。问题是，我想把这个值存储在onSelect函数和barrating函数之外的一个变量中。

我想要这个，因为我有多个星级，我需要计算这些评分的平均值。有什么建议吗？

Answer 1

对于任何想知道的人，我能够通过添加一个隐藏输入来修复这个问题。基本上，当OnSelect函数发生时，我会将隐藏输入的值设置为“val”。通过这种方式，我将始终拥有正确的值。

<select id="skills">
  <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>
</select>
<input type="hidden" class="skills-rating" name="skills-rating" value="">


  $('#skills').barrating({
    theme: 'fontawesome-stars',
    initialRating: null,
    onSelect: function(value, text, event) {
      if (typeof(event) !== 'undefined') {
        // rating was selected by a user
        val = $(event.target).data("rating-value");
        $(".skills-rating").val(val);
      }
    }
  });

Answer 2

您可以在barrating()作用域之外声明变量，并使用$.extend()将新数据合并到原始状态。

var state = {};

$('#skills').barrating({
  theme: 'fontawesome-stars',
  initialRating: null,
  onSelect: function(value, text, event) {
    if (typeof(event) !== 'undefined') {
      // rating was selected by a user
      var val = $(event.target).data("rating-value");
      $.extend(state, {skills: val});
      console.log(state);
    }
  }
});

$('#communication').barrating({
  theme: 'fontawesome-stars',
  initialRating: null,
  onSelect: function(value, text, event) {
    if (typeof(event) !== 'undefined') {
      // rating was selected by a user
      var val = $(event.target).data("rating-value");
      $.extend(state, {communication: val});
      console.log(state);
    }
  }
});

Answer 3

您可以创建一个map；全局地存储评级，也可以创建一个jQuery插件来从小部件中提取值。

​

var formState = {};

(function($) {
  $.fn.starRating = function() {
    return this.next().find('.br-current').data('rating-text');
  };
  $.fn.starRatings = function() {
    var map = {};
    this.each(function(index, widget) {
      map[$(widget).attr('name')] = $(widget).starRating();
    });
    return map;
  };
})(jQuery);

$('.star-rating').barrating({
  theme : 'fontawesome-stars',
  initialRating : null,
  onSelect : function(value, text, event) {
    var $starWidget = $(event.target),
        $select = $starWidget.parent().prev(),
        val = $starWidget.data('rating-value');

    // Global form state
    formState[$select.attr('name')] = val;
    console.log(JSON.stringify(formState));
    
    // jQuery plugin to get all the ratings.
    console.log(JSON.stringify($('.star-rating').starRatings()));
    
    // Get individual rating.
    console.log($('select[name="skills"]').starRating());
  }
});

.as-console-wrapper { max-height: 4em !important; }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/fontawesome-stars.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/css-stars.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/jquery.barrating.min.js"></script>

<form>
  <label>Skills</label>
  <select name="skills" class="star-rating">
    <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>
  </select>

  <label>Communication</label>
  <select name="communication" class="star-rating">
    <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>
  </select>

  <label>Quality</label>
  <select name="quality" class="star-rating">
    <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>
  </select>
</form>

​