2017-03-17 11 views
0

私の現在のレールアプリでは、ユーザがカテゴリと同様にアクティビティを作成できるようにしています。カテゴリは、ユーザーがアクティビティをソートするために使用できるフォルダにいくぶん類似しています。Rails - 各オブジェクトの個々のセクション?

私が経験している難しさは、これをHTMLでどのように実装するか分かりません。私はあなたが "各"ループを使用して、データベース内の各カテゴリまたは活動の名前を印刷できることを知っています。私はブートストラップスタイルシートを使用しています。カテゴリを実装するために使用する予定の「折りたたみ」クラスがあります。

しかし、「折り畳み」クラスを使用するには、表示/非表示に切り替えるパネルに「href」が必要です。これが "each"ループを使用して試行されると、カテゴリ名がデータトグルとして「折り畳み」で出力されますが、各カテゴリは同じパネルを参照します。つまり、各カテゴリに属する​​アクティビティを一覧表示することはできません。共有するパネルを1つだけ表示/非表示に切り替えるだけです。

私は私が午前問題を記述するために間違った文言を使用していた場合に謝るが、ここで私は、「各」ループ内の2枚の異なるパネルを持っていた場合は画像内のいくつかのpictures to show what I mean

問題を簡単に固定することができますし、それらを対応するパネルにリンクするために、「折り畳み」データトグルの2つのインスタンスを作成します。しかし、これは一時的な修正です。ユーザーが複数のカテゴリを作成することが許可されている場合、それぞれのカテゴリごとに個別のパネルを作成して参照する必要があります。

基本的には、共通カテゴリに属する​​アクティビティセットごとに個別のパネルを作成し、それぞれのパネルを対応するアクティビティにリンクする必要があります。私はHTMLとRailsに関する限られた知識しか持っていないので、これに対する解決法やこれにアプローチする方法について考えることはできません。すべてのヘルプやアドバイスを感謝、感謝

カテゴリ表示コードのようになります。

<body> 
<div class="panel-body"> 
    <h2 align = "center">Categories</h2> 
</div> 
<% @categories.each do |cat| %> 
    <div class="panel-group"> 
     <div class="panel-group"> 
     <div class="panel text-center"> 
      <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" href="#collapse1"> 
       <%= cat.c_name %> 
       </a> 
      </h4> 
      </div> 
      <div id="collapse1" class="panel-collapse collapse"> 
      <ul class="list-group"> 
      <li class="list-group-item">Activity One</li> 
      <li class="list-group-item">Activity Two</li> 
      <li class="list-group-item">Activity Three</li> 
      </ul> 
      <div class="panel-footer">Activities</div> 
     </div> 
     </div> 
     </div> 
    </div> 
<% end %> 
</body> 

答えて

0

あなたがHTMLでIDを使用するときは、とにかくやるべき固有のIDを使用することができます。

<a data-toggle="collapse" href="#collapse1"> 

この行に伴う問題は、それが困難であるが、それは動的でなければならない符号化されたことである:

<a data-toggle="collapse" href="#collapse<%= cat.id%>"> 

このように、各トグルHREFは、オブジェクトのid列に基づいて固有のIDを有しています。

また、この行を変更する必要があります。同じに

<div id="collapse1" class="panel-collapse collapse"> 

を:

<div id="collapse<%= cat.id %>" class="panel-collapse collapse"> 
+0

私はあなたがこのためにできたわかりませんでした。助けてくれてありがとう! – VectorConvoy

関連する問題