Question

我从this SO问题调整了这个js，但我以前从未使用过js而且不确定我在这里做错了什么。它很可能是一个简单的修复，但你的帮助非常感谢。

目标：当用户添加课程时，他们会输入学生的姓名，类型和数量。当:number_of_students发生变化时，js会启动并显示相应数量的forms_for学生（我正在example工作）。

问题：总体而言，它正在运行 - 视图正常运行，并且提交的数据会转到正确的位置。但是标题的第一位（性别标签的名称）最初显示，即使它们不应该显示（它们都是id =“nos_header”的表的一部分。当我更改:number_of_students时，而不是显示的行，标题消失，没有其他内容出现。

我在哪里：

这是student_groups.js中的javascript：

    var row_i = 0;

function emptyRow() {
   row_i++;
   this.obj = $("<tr></tr>");
   this.obj.append('<td><input type="text" size="5" value="' + row_i + '"/></td>');
   this.obj.append('<td><input type="text" size="5" name="Student name' + row_i + '"     id="ss_name' + row_i + '""/></td>');
   this.obj.append('<td><input type="text" size="5" name="Gender' + row_i + '" id="ss_gender' + row_i + '""/></td>');
}

function refresh(new_count) {
//how many applications we have drawed now ?
    console.log("New count= " + new_count);
    if(new_count > 0) {
        $('#nos_header').show();
    }
    else {
        $('#nos_header').hide();
    }
var old_count = parseInt($('tbody').children().length);
    console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
 console.log("Rows diff= " + rows_difference);
//if we have rows to add
if (rows_difference > 0)
  {
    for(var i = 0; i < rows_difference; i++)
    $('tbody').append((new emptyRow()).obj);
  }
else if (rows_difference < 0)//we need to remove rows ..
  {
    var index_start = old_count + rows_difference + 1; 
    console.log("Index start= "+index_start);
    $('tr:gt('+index_start+')').remove();
    row_i += rows_difference;
  }
}

$(document).ready(function () {
    $('#nos').change(function () {
        refresh( $(this).val() );
    })
});

和student_groups/new.html.erb（对于时髦的格式化道歉，这是我在textmate文件中阅读的最佳方式）：

<%= form_for(@student_group) do |f| %>

  <p>
    <span class="form_field"><%= f.text_field :name, placeholder: "The name of this group" %></span>
  is a/an 
    <%= f.select :type_of_group, [["select a group type", ""], "young learners class (0-6)", "primary class (7-12)", "secondary class (13-17)", "adult class (18+)", "children's sport team", "adult's sport team"] %> 
  and there are 
    <span id="nos" class="dropdown"><%= f.select :number_of_students, (0..60) %></span>
  members.
  </p>


  <table id="nos_header">
      <tbody>    
        <tr>
          <td><%= f.label :name, "Student name:" %></td>
              <td><%= f.label :gender, "Gender:" %></td>
        </tr>
      <%= f.fields_for :students do |builder| %>
        <%= render 'students/form', :f => builder %>
      <% end %>
      </tbody>
    </table>

<%= f.submit "Submit", :class => 'big_button round unselectable' %>

最后students/_form.html.erb：

<tr>
  <td id="ss_name" class="form_field"><%= f.text_field :name %></td>
  <td id="ss_gender" class="dropdown"><%= f.select :gender, ['Female', 'Male', 'Transgender'] %></td>   
</tr>

Answer 1

几乎没有错误，我已经纠正了它。下面是相应的代码以及来自Fiddle的实时工作副本。

JS FIDDLE

JS CODE：

$(document).ready(function () {
  //hide table by default
  $('#nos_header').hide ();

  $('#nos').change(function () {
    var opt=$('#nos option:selected');
      //alert(opt.text());
    refresh(opt.text());
  })
});

快乐编码：）

js + rails - 无法使此表单正常工作

1 个答案: