流星では、同じクラス名の動的IDを作成する方法

Question

フォームを送信すると、動的にカードが表示されます。私はカードは以下のJSでいくつかの隠れた部分で生成されますフォームを送信する際

<template name="workflow"> 

    <div id="newActionCard"> 

     {{#each newaction}} 
        <div class="workflowcard"> 
        <div class="module-card-small"> 
         <div class="res-border"></div> 
         <div class="card-img">{{team}}</div> 
         <div class="res-content"> 

         <div class=" newaction-name">{{action_title}}</div><hr> 
         <div class="newaction-des">{{description}}</div> 
         <!-- <div class=" due-on">Due on:{{d_date}}</div><hr>--> 
         </div> 
          <div class="due"> 

          Due on: 
          <div> 
           <div class="day-stamp">{{weekday d_date}}</div> 
          <div class="date-stamp">{{date d_date}}</div> 
          <div class="month-stamp">{{month d_date}}</div> 
          </div> 
         </div> 

          {{> actioncardsubcontent}} 
</div> 
     <div class="btn-box"> 
      <button type="button" class="cancelsub">New Action</button> 
      <button type="submit" class="createbtnsub">Show Options</button> 
     </div> 
    </div> 

        {{/each}}                                    
      </div> 
     </div> 

    </template> 

<template name="actioncardsubcontent"> 

    <div class="subcontent"> 

      <div class="modulepath"><div>{{module_list}}</div></div> 
      <div class="linkto"><div>Linked To: &nbsp;<div class="linkto-color">{{link}}</div></div></div> 
      <div class="description"><div>Notes:<br>{{description}}</div></div> 
      </div> 

</template> 

：ここ

はコードです。

Template.actioncardsubcontent.rendered = function(){ 
    this.$(".subcontent").hide(); 
}; 

[表示オプション]ボタンをクリックすると、非表示部分が表示されます。そして下の私の質問があること

Template.workflow.events({ 
"click .createbtnsub":function(){ 
$('.subcontent).show(); 
} 
}); 

するためのコードで、私は特定のカードにない時には隠れた部分は、各カードに表示される出力で表示するオプションボタンをクリックしたとき。理由は、私はそれぞれに同じクラス名を与えて、私は特定のカードallos特定のカードをクリックしてコンテンツを非表示にする動的idを作成したいです。それを書く方法。私はそこにこだわっている。誰も助けることができますか？

以下のコードで試しましたが、うまくいきません。

<div class="action" id={{_id}}> {{> actioncardsubcontent}} </div> 

とJSで私はvar id="#"+this._id;$(id).show();で$('.subcontent').show();を交換しますが、それは動作しません。 1回のクリックごとに動的ID生成を行う方法を教えてください。

Answer 1

id={{_id}}ソリューションのアイデアは正しいですが、id属性を非表示要素とは別の要素に追加しました。これを試してみてください：

<template name="actioncardsubcontent"> 
    <div class="subcontent" id={{_id}}> 
    ... 
    </div> 
</template> 

あなたは

$('#' + this._id).show(); 

をすれば、上のテンプレートであなたのイベントハンドラは、まだこれはを助けていない場合は、あなたのデータがないので、それはかもしれ要素を見つける必要があります_id属性があります。その場合、他の一意の識別子を使用するか、Random.id()で追加することができます。

Answer 2

これは私のために働いたようにこれを試すことができます。

function(){ 
     $('.className').each(function(i) { 
      $(this).attr('id', 'idName'+i); 
    });