Question

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

目前，我的页面会在每个下面呈现一个包含Soups的类别列表。页面输出如下所示：

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

我添加了点击类别名称以显示/隐藏Soups的功能。但我希望此功能的范围仅限于每个类别。换句话说，我想点击“Ramen”只显示/隐藏Soup 1和Soup 2。现在，点击任何类别会显示/隐藏所有4个汤。

视图＆GT;类别和GT; 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中进一步指定它们，然后隐藏该特定元素而不是整个catcontents <div> in你的Javascript隐藏功能。

例如：

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

然后当然只需更改您的Javascript隐藏功能，以隐藏<li> ID而不是catcontents <div>。

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

1 个答案: