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

Posted 2023-05-09

【中文标题】在 Rails 4 中使用 Jquery Raty 并显示平均星级

【英文标题】：Using Jquery Raty in Rails 4 and showing average of star rating

【发布时间】：2015-08-19 02:44:36

【问题描述】：

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

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

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

【参考方案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>

删除了给予最后星级评分的双重 ID（星级技术和总体评价）

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

【讨论】：

还有一个问题，除总分外的所有星级均显示目标分数，但总分未显示目标分数，同时更新时我将分数设置为：4 至总分，然后显示目标分数

@nishantvarshney 您使用 2 个具有相同模型属性名称的 text_field 是否有任何具体原因

@nishantvarshney 检查更新的答案..也可以在文本框中添加分数..$("#hint-overall").val(score.toFixed(2));。在这种情况下，Target 将不起作用，因为我们没有在该星级项目上触发事件。

我正在使用它来显示文本字段中的总分。其实主要目的是显示和存储在f.text_field中，以便提交后可以保存在数据库中，还有其他方法可以存储在数据库中吗？

哦，对不起，log_skill 重复了 2 次……实际上其他 2 个是 :tech_skill 和 :overall_skill（表字段）..