Question

我正在使用此插件制作一个简单的星级评分系统 - ＆gt; 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

您可以声明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 2

对于任何想知道的人，我都可以通过添加隐藏输入来解决这个问题。基本上，当OnSelect函数发生时，我将该隐藏输入的值设置为＆＃39; val＆＃39;。这样我将始终拥有正确的价值。

<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 3

您可以创建地图;全局存储评级，或者您可以创建一个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>

Answer 4

只需一个数组来存储所有评级。每次执行OnSelect时都会按下新值。

 var ratings = [];

 $('#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);
      ratings.push(val); 
    }
  }
});

星级评分插件问题

4 个答案: