Javascript 在Rails 4中使用Jquery Raty并显示星级平均值

我有一个Rails应用程序，我在其中使用jquery Raty插件，我已经将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
});

星星评级的视图如下所示

<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个领域的星级给予如下

逻辑和分析能力

沟通技巧

技术技能

综合技能

因此，现在在前三个星级中，用户将进行评分，根据这些评分，在评分时将更新总体技能（只读），或者我们可以说总体技能评分将是前三个技能的平均值，它将自动更新并持续显示星级 我该怎么做

将班级星级添加到星级评定的第3组

---

还有一个问题，除总评分外，所有星级评分均显示目标评分，但总评分未显示目标评分，同时在我将分数设置为4时进行更新，然后显示目标评分score@nishantvarshney您使用具有相同模型属性的2 text_字段有什么具体原因吗name@nishantvarshney检查更新回答..用于在文本框中添加分数..

$（“#提示总体”）.val（分数.toFixed（2））。在这种情况下，Target将不起作用，因为我们不会触发该星级项目的事件。我正在使用它在文本字段中显示总分。实际上，主要目的是显示并存储在f.text_字段中，以便在提交后将其保存在数据库中，是否有其他方法存储在数据库中？哦，对不起，日志技能重复了2次。。。实际上，另外两个是：技术技能和：总体技能（表字段）。。
<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));
});