0

我正在浏览关于 jquery 的 Railscasts 视频并遇到了一些代码。我正在制作一个待办事项列表应用程序。这是我的jQuery代码：

列表.js

$(function () {
 $('.edit_task input[type=submit]').remove();
 $('.edit_task  input[type=checkbox]').click(function () {
   console.log(this);
  });
});

我有一个 list/show.html.erb 文件：

<h3>Unfinished Tasks</h3>
<div class="tasks" id="incomplete_tasks">
  <% @list.tasks.incomplete.each do |task| %>
      <%= form_for [current_user, @list, task], remote: true do |f| %>
          <%= f.label :completed, class: 'checkbox' do %>
          <%= f.check_box :completed %>
          <%= task.description %>
      <% end %>
      <%= f.submit "Update" %>        <!--We hide this button in jquery-->
  <% end %>
  <% end %>
</div>
<h3>Finished Tasks</h3>
<div class="tasks" id="completed_tasks">
  <% @list.tasks.completed.each do |task| %>
      <%= form_for [current_user, @list, task], remote: true do |f| %>
         <%= f.label :completed, class: 'checkbox' do %>
          <%= f.check_box :completed %>
          <%= task.description %>
      <% end %>
      <%= f.submit "Update" %>        <!--We hide this button in jquery-->
  <% end %>
  <% end %>
</div>

因此，这会产生以下 html 代码。：

<div class="tasks" id="incomplete_tasks">
  <form accept-charset="UTF-8" action="/users/4/lists/12/tasks/23" class="edit_task"     data-remote="true" id="edit_task_23" method="post">
      <label class="checkbox" for="task_completed">
          <input name="task[completed]" type="hidden" value="0" /><input id="task_completed" name="task[completed]" type="checkbox" value="1" />
          Read for exam
     </label> 
     <input name="commit" type="submit" value="Update" />        <!--We hide this button in jquery-->
 </form>
   <form accept-charset="UTF-8" action="/users/4/lists/12/tasks/24" class="edit_task"     data-remote="true" id="edit_task_24" method="post">
      <label class="checkbox" for="task_completed">
          <input name="task[completed]" type="hidden" value="0" /><input id="task_completed" name="task[completed]" type="checkbox" value="1" />
          Eat healthy food
     </label> 
     <input name="commit" type="submit" value="Update" />        <!--We hide this button in jquery-->
  </form>

如果你注意到，你会看到

 <input name="task[completed]" type="hidden" value="0" /><input id="task_completed" name="task[completed]" type="checkbox" value="1" />

两种形式都有相同的 id="task_completed" 。因此，当我单击第二个列表（表单）中的文本时，第一个表单被选中。我该如何解决这个问题？是否有某种“Rails 方式”来做到这一点？请帮我 。

编辑：所以问题是不同形式的输入都具有相同的 id，这是由 rails 使用此代码自动创建的

              <%= f.check_box :completed %>

那么，如何覆盖 Rails 中的 id 创建，以便每个表单/输入标签都有唯一的 id ？

4

1 回答 1

0

您不应该在同一页面上有两个具有相同 id 的项目，而是使用一个类。其次，您可能会发现确定 CSS 选择器的范围可能会有所帮助。

$("#incomplete_tasks .task_completed").click(function(){

});
于 2013-06-17T13:15:46.310 回答