Question

问题：单击时显示/隐藏javascript函数会打开所有do循环结果。我只需要打开/单击“编辑”的一个结果即可。

在单击“编辑”之前，表单文本字段一直处于隐藏状态。该表可以有一个以上的结果，因此当该表确实有2个以上的结果时，单击“编辑”按钮将对所有循环结果起作用，而不仅仅是单击该结果。

html：

<div class="form-show"><a href="" id="form-show">Edit</a></div>

<div id="form-hide">
    <!--form and text_field-->
</div>

Javascript：

$(function() {
  $('a#form-show').click(function(event){
    event.preventDefault();
    $('div#form-hide').toggle();
  });
});

表单是一个do循环（遍历结果）。

如何更改JavaScript，以便当用户单击“编辑”时，只能编辑1个结果，而不是所有结果？

整个表单：

<td class="center ">
  <div class="form-show"><%= user.field %>% <a href="" id="form-show">Edit</a></div>
      <div id="form-hide">
          <%= form_for user, remote: true do |f| %>
          <%= f.text_field :field, class: "form-cotrol" %>
          <%= f.button data: {confirm: "Are you sure?"}, class: "btn btn-light " do %>
             <i class="fa fa-pencil" aria-hidden="true"></i>
         <% end %>
      <% end %>
  </div>
</td>

Answer 1

只需使用.next()来查找下一次出现的可编辑div：

$(function() {
  $('a#form-show').click(function(event){
    event.preventDefault();
    event.target.next($('div#form-hide')).toggle();
  });
});

Answer 2

这不一定是答案，但是如果您正在阅读此书并遇到相同的问题。

请阅读@ Mohamed-Yousef在OP下的评论...他的回答已解决并回答了问题，但他没有做出答复/回答

我的显示/隐藏发生在所有循环结果中，而不是一键单击

2 个答案: