在其他模型的上下文中顯示/隱藏模型內容

所以我有一個與我的Soup模型具有「多」關係的類別模型。在其他模型的上下文中顯示/隱藏模型內容

目前，我有我的網頁在下面的每個下面呈現一個類別與湯的列表。頁面輸出看起來是這樣的：

拉麪 *湯1 *湯2個其他湯類 *湯3 *湯4

我加入點擊類別名稱顯示/能力隱藏湯。但是我希望將這個功能的範圍限制在每個類別中。換句話說，我想單擊「拉麪」只顯示/隱藏湯1和湯2。現在，點擊任何類別顯示/隱藏所有4湯。

意見>類別> 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>

任何和所有幫助表示讚賞

來源

2016-11-03 Andy S.

一個簡單的方法來做到這一點的同時不改變所有的東西，是一個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>隱藏。

來源

2016-11-03 20:36:41

感謝您的幫助。你能告訴我你如何在JS函數中引用li的ID嗎？我試着看這個頁面的答案，但我很困惑如何處理它在我的，因爲ID是一個變量http://stackoverflow.com/questions/18162197/rails-pass-data-to-javascript –

當然！當你使用jQuery時，你可以利用jQuery選擇器。要通過id選擇一個元素，使用'$（「＃id」）'。要進一步閱讀jquery選擇器，你可以看看這篇文章[這裏]（http://www.w3schools.com/jquery/jquery_selectors.asp）從w3schools –

所以我知道如何使用jquery選擇器的固定ID，但在這種情況下，我無法弄清楚如何在我的選擇器中引用<％= soup.name％>變量。我會怎麼做？對不起！ –

在其他模型的上下文中顯示/隱藏模型內容

回答

相關問題