使用 Jquery Raty in Rails 4 并显示平均星级

Question

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

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 个星级评分字段

逻辑和分析能力
沟通技巧
技术能力
综合技能

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

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));
});

使用 Jquery Raty in Rails 4 并显示平均星级

Using Jquery Raty in Rails 4 and showing average of star rating

javascript

jquery

ruby-on-rails

raty

ruby-on-rails-4.1