在其他模型的上下文中显示/隐藏模型内容

Question

所以我有一个 Category 模型，它与我的 Soup 模型有“很多”关系。

目前，我的页面呈现了一个类别列表，其中包含以下每个类别中的汤。页面输出如下所示：

拉面 *汤 1 *汤2 其他汤 *汤3 *汤4

我添加了单击类别名称以显示/隐藏汤的功能。但我想将此功能的范围限制在每​​个类别。换句话说，我只想点击“拉面”显示/隐藏汤 1 和汤 2。现在，单击任何类别会显示/隐藏所有 4 种汤。

views> 类别> index.html.erb

<ul id="folderList">
  <% @categories.each do |category| %>

  <li>
  <img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/folder-blue-128.png" alt="folder" width="10%">

  <%= link_to category.name, '#', id: 'show_catcontents' %> (<%= category.soups.count%>)

  <div id="catcontents">
    <ul>
    <%- category.soups.each do |soup| %>
      <li><%= soup.name %></li>
    <%- end %>
    </ul>
  </div>

  </li>
  <% end %>
</ul>

<script>    
  $(function() {
  $('a#show_catcontents').click(function(event){
    event.preventDefault();
    $('div#catcontents').toggle();
  });
});
</script>

感谢您的任何帮助

Answer 1

在不改变太多的情况下做到这一点的一种简单方法是为每个元素添加一个 id 以在嵌入的 ruby​​ 中进一步指定它们，然后在 Javascript 中隐藏该特定元素而不是整个 catcontents <div>隐藏功能。

例如：

<div id="catcontents">
  <ul>
    <%- category.soups.each do |soup| %>
      <li id= <%= soup.name %> ><%= soup.name %></li>
    <%- end %>
  </ul>
</div>

当然，只需将您的 Javascript 隐藏函数更改为使用 <li> id 而不是 catcontents <div> 隐藏。