Использование Jquery Räty в Rails 4 и показывает среднее число звезд

Question

У меня есть приложение Rails, в котором я использую JQuery плагин Räty я включил Räty в 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 
}); 

вид для рейтинга звезд г IVEN в

<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

Добавить класс звезд в группу 3 звезды рейтингов

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

Удален двойной идентификатор К последним снимутся рейтинги (звезда технологий и 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)); 
});