javascript - 在Rails 4中使用Jquery Raty并显示平均星级

我有一个Rails应用程序，其中我正在使用jQuery Raty插件，我在gemfile中包含了Raty

gem 'jquery-raty-rails', github: 'bmc/jquery-raty-rails'

并且在application.js中，我包括了

//= require jquery.raty
//= require jquery.raty.min

我已经将其包含在javascript中

  $('#star-log').raty({
    target     : '#hint-log',
    targetType : 'score',
    targetKeep : true
});
$('#star-comm').raty({
    target     : '#hint-comm',
    targetType : 'score',
    targetKeep : true
});
$('#star-tech').raty({
    target     : '#hint-tech',
    targetType : 'score',
    targetKeep : true

});
$('#star-overall').raty({
    target     : '#hint-overall',
    targetType : 'score',
    targetKeep : true,
    readOnly   : true
});

星星评级的 View 为

<div class="row">
            <div class=" col s12 m6 logical">
              <label>Logical & Analytical Skills</label>
              <div id="star-log" > </div>
              <%= f.text_field :log_skill, :id=>'hint-log' %>

            </div>
            <div class=" col s12 m6">
              <label>Communication skills</label>
              <div id="star-comm" ></div>
              <%= f.text_field :comm_skill, :id=>'hint-comm' %>
            </div>
          </div>
                <div class="row">
                  <div class=" col s12 m6">
                    <label>Technical Skills</label>
                    <div id="star-tech" id="star-tech"></div>
                    <%= f.text_field :log_skill, :id=>'hint-tech' %>
                  </div>
                  <div class="col s12 m6">
                    <label >Overall Rating</label>
                    <div id="star-overall" id="star-read"></div>
                    <%= f.text_field :log_skill, :id=>'hint-overall' %>
                  </div>
                </div>

我有4个星级评定字段，分别为

逻辑和分析技能

沟通技巧

技术技能

综合技能

因此，现在在前三星级中，用户将对其进行评分，并且通过这些评分，整体技能(只读)将在评分时进行更新，或者我们可以说整体技能评分将是前三个技能的平均值，并且会自动更新并继续显示星星
我怎样才能做到这一点 ？

最佳答案

<div class="row">
  <div class=" col s12 m6 logical">
    <label>Logical & Analytical Skills</label>
    <div id="star-log" class="stars" > </div>
    <%= f.text_field :log_skill, :id=>'hint-log' %>
  </div>

  <div class=" col s12 m6">
    <label>Communication skills</label>
    <div id="star-comm" class="stars" ></div>
    <%= f.text_field :comm_skill, :id=>'hint-comm' %>
  </div>
</div>
<div class="row">
  <div class=" col s12 m6">
    <label>Technical Skills</label>
    <div id="star-tech" class="stars"></div>
    <%= f.text_field :log_skill, :id=>'hint-tech' %>
  </div>
  <div class="col s12 m6">
    <label >Overall Rating</label>
    <div id="star-overall"></div>
    <%= f.text_field :log_skill, :id=>'hint-overall' %>
  </div>
</div>

$('#star-log').raty({
    target     : '#hint-log',
    targetType : 'score',
    targetKeep : true
});

$('#star-comm').raty({
    target     : '#hint-comm',
    targetType : 'score',
    targetKeep : true
});

$('#star-tech').raty({
    target     : '#hint-tech',
    targetType : 'score',
    targetKeep : true

});

$('#star-overall').raty({
    target     : '#hint-overall',
    targetType : 'score',
    targetKeep : true,
    readOnly   : true
});

$(document).on("click", ".stars", function(){
  var score = 0 ;

  //loop through stars to get score
  $('.stars').each(function(i, obj) {
    //if score is there will be undefined if star not selected
    if ($(obj).raty('score'))
      score +=  $(obj).raty('score');
  });
 //calculating average
 score = score / $(".stars").length;
 $('#star-overall').raty({score:  score });
 $("#hint-overall").val(score.toFixed(2));
});