JavaScript 在页面重新加载 [Rails] 时不起作用？

Question

这是我的 JavaScript：

function showQuestion(id) {
  $(".question").hide();
  $("#"+id).show();
}

$(document).ready(function() {
  current_question=1;
  showQuestion(current_question);
  $("#next_question").click(function(){
    alert('The current question is '+current_question);
    current_question=current_question+1;
    showQuestion(current_question);
  });
  $("#prev_question").click(function(){
    alert('The current question is '+current_question);
    current_question=current_question-1;
    showQuestion(current_question);
  });
});

这是我的show.html.erb [我的 Rails 视图]：

<div id="questions">
  <% @questions.each_with_index do |q,i| %>
    <div id="<%= i + 1 %>" class="question">
    <strong><%= q.body %></strong>
    <% if q.type == "MultipleChoice" %>
      <% q.choices.each do |choice| %>
        <br /><%= radio_button_tag "question#{q.id.to_s}", "choice#{choice.id}", @answer == choice  %>&nbsp;<%= choice.body %>
      <% end %>
    <% end %>
    <table>
    <tr><td><%= link_to "< Previous", '#', :remote => true, :id => "prev_question" %></td><td><%= link_to "Next >", '#', :remote => true, :id => "next_question" %></td></tr>
    </table>
    </div>
  <% end %>
</div>

因此，当我单击“下一个”或“上一个”按钮时，它会起作用。 但在那之后，两个按钮都不起作用。 我感觉这与 jQuery 无法正常工作有关。 谢谢！

Answer 1

如果我正确理解了代码（我不知道 ruby），那么您的 ID 应该是唯一的。 您正在创建许多具有相同 ID 的按钮。 jQuery 仅附加到第一个（因为应该只有一个）。

尝试将其更改为 class。 或者（可能更好），从循环中删除按钮，只创建一组按钮。

编辑：另外，虽然这可能不会导致问题，但 ID 不应以数字开头，除非您使用 HTML5，我认为这可能允许这样做。

Answer 2

你真的很亲近！

问题是您正在为每个具有相同 ID 的问题生成一组链接，这是不正确的。 当您第一次单击其中一个时，听起来第一组链接被隐藏了。

一种解决方案是将带有“上一个”和“下一个”链接的表格移到包含它的标签之外。 这是一个小提琴，显示了您的代码的简化版本，其中包含问题 div 之外的 prev 和 next 链接。 http://jsfiddle.net/QNLF9/

您也可以将链接保留在问题 div 中，为其分配 class 并在 jQuery 代码中使用 class 选择器。 这是一个例子。 http://jsfiddle.net/traDx/

我希望这会有所帮助。 还有一件小事。 您应该使用 html 转义码< 和> 而不是<和>分别。 快乐编码！