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

Question

我有一个 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 个星级评级字段

1. 逻辑和分析能力
2. 沟通技巧
3. 技术技能
4. 综合技能

所以现在用户将在前三个星级评分中进行评分，并且通过这些评分，整体技能(只读)将在评分时更新，或者我们可以说整体技能评分将是前三个技能的平均值并且它将自动更新并不断显示星星 我该怎么做？

Answer 1

Add class stars to group 3 of the star ratings

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

Removed double id given to last to star ratings (star tech and overvall)

$('#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));
});