Javascript Rails 4 raty和嵌套表单按钮，用于添加问题和更新星级

嗨，我有一个表格，我想显示嵌套的表格来添加问题，并根据答案更新raty stars。表格如下所示

<%= form_for @interview_round do |f| %>
    <div class="modal-content">
      <div class="row margin_0 margin_T10">
        <h4 class="margin_T0 margin_B30 center-align">Interview Feedback Form</h4>
        <div class="col s12 m12">
          <div class=" interview_details_box">
            <div class="row">
              <div class="input-field col s12 m6">
                <label for="intr_type" class="">Interview Type</label>
                <%=h @interview_round.scheduled_at %>
              </div>
              <div class="input-field col s12 m6">
                <select>
                  <option value="" selected>Choose your option</option>
                  <option value="1">Trainee</option>
                  <option value="2">Project Manager</option>
                  <option value="3">SSDE</option>
                  <option value="4">SDE</option>
                </select>
                <label for="intr_pos" class="">Position</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12 m6">
                <input id="intr_candidate" type="text" class="validate" placeholder="Candidate" >
                <label for="intr_candidate" class="">Candidate</label>
              </div>

                  <div class="input-field col s12 m6">
                    <%= f.text_field :interviewer_name %>
                    <label for="intr_interviewer" class="">Interviewer</label>
                  </div>
                  </div>

                  <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 :tech_skill, :id=>'hint-tech' %>
                    </div>
                    <div class="col s12 m6">
                      <label >Overall Rating</label>
                      <div id="star-overall"></div>
                      <%= f.text_field :overall_skill, :id=>'hint-overall' %>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s12 m6">
                      <select>
                        <option value="" selected>Choose your option</option>
                        <option value="1">Recommended</option>
                        <option value="2">Not Recommended</option>
                        <option value="3">OnHold</option>
                      </select>
                      <label for="intr_result" class="">Result</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s12 m12">
                      <%= f.text_area(:remarks, size: '50x10') %>
                      <label for="intr_remark">Remark</label>
                    </div>
                    <div class="row">
                      <%= f.fields_for :round_questions do |question| %>
                            <%= question.label :question %>
                            <%= question.text_field :question %>
                            <%= question.label :answer %>
                            <%= question.text_field :answer %>
                      <% end %>
                    </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  <div class="row margin_0 margin_T10">
                    <div class="col s12 m12">


                      <div class="row margin_0 showdiv" style="display:none;">
                        <div class="col s12 m12">
                          <div class="input-field col s12 m12">
                            <input id="addques" type="text" class="validate" placeholder="Question" >
                            <label for="addques" class="">Question</label>
                          </div>
                        </div>
                      </div>

                      <div class="row margin_0 margin_T10">
                        <div class="col s12 center-align">
                          <button class="btn waves-effect waves-light btn-medium custom_btn_gray" type="button" name="action" onclick="$('.showdiv').toggle();">Add Question</button>
                        </div>
                      </div>

                    </div>

                  </div>
                  <div class="row margin_0 margin_T10">
                    <div class='col s12 center-align'>
                      <%= button_tag(:class => "btn waves-effect waves-light btn-large custom_btn_gray") do %>
                          Submit <i class="mdi-content-send right"></i>
                      <% end %>
                    </div>
                  </div> 
      <% end %>
    </div>

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

面试模式

has_many :round_questions
accepts_nested_attributes_for :round_questions

和圆问题模型

 belongs_to :interview_round

评分系统实际上定义为，当用户对逻辑技能、沟通技能和技术技能（分数来自问答）评分为星级时，计算星级的平均值并存储在总体技能中，此功能的javascript如下所示：

<%= form_for @interview_round do |f| %>
    <div class="modal-content">
      <div class="row margin_0 margin_T10">
        <h4 class="margin_T0 margin_B30 center-align">Interview Feedback Form</h4>
        <div class="col s12 m12">
          <div class=" interview_details_box">
            <div class="row">
              <div class="input-field col s12 m6">
                <label for="intr_type" class="">Interview Type</label>
                <%=h @interview_round.scheduled_at %>
              </div>
              <div class="input-field col s12 m6">
                <select>
                  <option value="" selected>Choose your option</option>
                  <option value="1">Trainee</option>
                  <option value="2">Project Manager</option>
                  <option value="3">SSDE</option>
                  <option value="4">SDE</option>
                </select>
                <label for="intr_pos" class="">Position</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12 m6">
                <input id="intr_candidate" type="text" class="validate" placeholder="Candidate" >
                <label for="intr_candidate" class="">Candidate</label>
              </div>

                  <div class="input-field col s12 m6">
                    <%= f.text_field :interviewer_name %>
                    <label for="intr_interviewer" class="">Interviewer</label>
                  </div>
                  </div>

                  <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 :tech_skill, :id=>'hint-tech' %>
                    </div>
                    <div class="col s12 m6">
                      <label >Overall Rating</label>
                      <div id="star-overall"></div>
                      <%= f.text_field :overall_skill, :id=>'hint-overall' %>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s12 m6">
                      <select>
                        <option value="" selected>Choose your option</option>
                        <option value="1">Recommended</option>
                        <option value="2">Not Recommended</option>
                        <option value="3">OnHold</option>
                      </select>
                      <label for="intr_result" class="">Result</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s12 m12">
                      <%= f.text_area(:remarks, size: '50x10') %>
                      <label for="intr_remark">Remark</label>
                    </div>
                    <div class="row">
                      <%= f.fields_for :round_questions do |question| %>
                            <%= question.label :question %>
                            <%= question.text_field :question %>
                            <%= question.label :answer %>
                            <%= question.text_field :answer %>
                      <% end %>
                    </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  <div class="row margin_0 margin_T10">
                    <div class="col s12 m12">


                      <div class="row margin_0 showdiv" style="display:none;">
                        <div class="col s12 m12">
                          <div class="input-field col s12 m12">
                            <input id="addques" type="text" class="validate" placeholder="Question" >
                            <label for="addques" class="">Question</label>
                          </div>
                        </div>
                      </div>

                      <div class="row margin_0 margin_T10">
                        <div class="col s12 center-align">
                          <button class="btn waves-effect waves-light btn-medium custom_btn_gray" type="button" name="action" onclick="$('.showdiv').toggle();">Add Question</button>
                        </div>
                      </div>

                    </div>

                  </div>
                  <div class="row margin_0 margin_T10">
                    <div class='col s12 center-align'>
                      <%= button_tag(:class => "btn waves-effect waves-light btn-large custom_btn_gray") do %>
                          Submit <i class="mdi-content-send right"></i>
                      <% end %>
                    </div>
                  </div> 
      <% end %>
    </div>

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

现在函数性定义为

表单上已经有3个问题，并且会有一个按钮来添加更多可选问题（3个问题是强制性的），当用户对问题进行评分时，这些问题的答案将为星级评分类型。将计算分数并存储在技术技能中作为平均评分（技术技能有助于提高整体技能）

---

请告诉我如何选择添加更多的问题，这些答案的评分将被计算为平均值并存储在技术技能中，我在这方面工作了一天，但不知道如何做，提前感谢你尝试了什么？你可以从你的模型开始-而不是为每种评分类型设置属性，你可以使用rating_type属性，然后为每次面试存储任意数量的评分。然后，您只需调整控制器操作和视图即可添加相同的灵活性。您是否检查了ryanb

nested_form

gem？它允许您轻松添加/删除嵌套字段。如果您有一些特殊的逻辑要做，您应该在你的控制器。然后，如果你总是有3个强制性问题，那么在你的视图中，当你为每个问题调用表单生成器时，你可以使用

如果f.index是的，我现在已经包括了这个gem，但是有一个问题，当我添加问题时，文本字段出现了，但是新问题旁边的raty stars不会出现