在軌道4使用jQuery RATY並顯示星級

Question

的平均我有一個Rails應用程序中，我使用我已經在Gemfile中包括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個字段星級等級定爲

1. 邏輯&分析技能
2. 溝通技巧
3. 技術技能
4. 整體技術

所以現在在前三名用戶評分，通過這些評分，整體技能（只讀）將在評分時更新，或者我們可以說綜合技能評分將是前三項技能的平均值，並且會自動更新並繼續顯示星星 我該怎麼做？

Answer 1

添加類明星星級評定

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

刪除雙重ID給出的3組到最後的星級評定（星高科技和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)); 
});