Question

我使用javascript来隐藏帖子按钮，直到文本输入到表单中。它工作正常，但是当我在循环中为每个帖子呈现表单时，它仅适用于第一个帖子，而其余部分则不会隐藏按钮。

这是javascript：

$(function(){
 $("#button").hide();

 $("#inputBody").keyup(function() {
     var val = $(this).val();
     if (val.length > 0) {
         $('#button').show();
     }
     else {
         $('#button').hide();
     }

 });
});

以下是表格：

<%= f.input :body, input_html: { :id => "inputBody" } %>
<%= f.submit "Answer", { :id => "button", class: "button5" } %>

以下是观点：

<% @questions.each do |question| %>
<%= question.body %>
<%= render :partial => "answers/form" %>
<% end %>

这是循环中第一个表单与第二个表单的html。

    <form accept-charset="UTF-8" action="/questions/61-the-best/answers" class="simple_form answer" id="new_answer" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="opkAO1vlXgbqHebqee839dtFv1lsA/osUexmGTU2x7k=" /></div>
<div class="input text optional"><textarea class="text optional hello3" id="inputBody" name="answer[body]" placeholder="Answer" rows="1">
</textarea></div>
<input class="button5" id="button" name="commit" type="submit" value="Answer" />
</form>

第二个（按钮显示）：

    <form accept-charset="UTF-8" action="/questions/62-this-is-a-test-question/answers" class="simple_form answer" id="new_answer" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="opkAO1vlXgbqHebqee839dtFv1lsA/osUexmGTU2x7k=" /></div>
<div class="input text optional"><textarea class="text optional hello3" id="inputBody" name="answer[body]" placeholder="Answer" rows="1">
</textarea></div>
 <input class="button5" id="button" name="commit" type="submit" value="Answer" />
</form>

Answer 1

看起来你多次重复使用相同的id（inputBody）。如果要标识多个类似元素，请使用类。 ID应该识别单个元素。

尝试将inputBody用作类，并使用$（“。inputBody”）来选择它。应用相同的原则来选择按钮。选择适当按钮的一种方法是查看inputBody父节点的兄弟节点。

这是JS小提琴： http://jsfiddle.net/4JDxS/

和代码片段（只是javascript）供快速参考。有关HTML更改的信息，请参阅JS小提琴：

$(function(){
 $(".myButton").hide();

 $(".inputBody").keyup(function() {
     var val = $(this).val();
     if (val.length > 0) {
         $(this).parent().siblings('.myButton').show();
     }
     else {
         $(this).parent().siblings('.myButton').hide();
     }

 });
});

在循环中隐藏表单提交按钮

1 个答案: