Question

我有一个html.erb文件，我在迭代一个集合时创建一个新行。我需要能够每行动态创建id，然后能够在我的id文件中指定.js，以便我可以在点击时显示/隐藏其中的一些内容。

#foo.html.erb file
<table>
  <thead>
    <tr>
      <th> Group Name </th>
      <th>&nbsp;&nbsp;</th>
      <th> Count </th>
    </tr>
  </thead>
  <tbody>
    <% @groups.each do |group_name, count_for_group| %> 
      <tr id="unique_id"> #create unique id here
        <td> <%= group_name %> </td>
        <td> </td>
        <td> <%= count_for_group %> </td> #this should be hidden. If the row this data belongs to is clicked, then show it. If clicked again, then hide it.
      </tr>
    <% end %>
  </tbody>
</table>

然后我需要能够在点击时显示/隐藏该组count，但我不知道如何找到动态创建的ID：

#app/assets/javascripts/test.js
$(document).ready(function(){

  $("#dynamic_group_id").on(“click”, function(e){ #somehow be able to specify the dynamically created id
    #show/hide contents
  });
});

Answer 1

您正在滥用元素ID。使用ID作为真正唯一的标识符。

对于其他一切，还有其他选择器 - 最常用的是类。

$(".group").on('click', function() {
  $(this).find('.hide-me').toggle();
});

console.log($(".group"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Group Name</th>
      <th>&nbsp;&nbsp;</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr class="group">
      <td>The Beatles</td>
      <td></td>
      <td class="hide-me">4</td>
    </tr>
    <tr class="group">
      <td>The Rolling Stones</td>
      <td></td>
      <td class="hide-me">4</td>
    </tr>
  </tbody>
</table>

每次迭代创建唯一ID，然后在单击时指定行为

1 个答案: