0

我从这个SO question改编了这个 js ，但我以前从未使用过 js，也不确定我在这里做错了什么。很可能这是一个简单的修复，但非常感谢您的帮助。

目标：当用户添加课程时，他们会输入名称、类型和学生人数。更改时:number_of_students，js 会启动并显示适当数量的 forms_for student（我正在使用的示例）。

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

我在哪里：

这是中的javascript student_groups.js：

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

1 回答 1

0

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

JS小提琴

JS代码：

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

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

快乐编码:)

于 2013-07-02T14:06:11.073 回答