機能を一度に止める方法は？

Question

流星では、私はフォームを提出した後にカードを動的に作成しました。ダイナミックカードには表示と非表示のボタンが含まれています。表示オプションボタンをクリックすると、その特定のカードではなく、隠れた部分がすべてのカードに表示されます。問題は、カードが動的に作成されているので、私はそれが問題だと思った。どのように各カードに別々に機能するように機能させるか。

ここで私は、コードを添付しています：JSで

<div id="newActionCard"> 
    {{#each newaction}} 
       <div class="workflowcard"> 
       <div class="module-card"> 
        <div class="res-border"></div> 
        <div class="card-img"></div> 
        <div class="res-content"> 
        <div class=" assigned-team">{{team}}</div> 
        <div class=" newaction-name">{{action_title}}</div><hr> 
        <div class="description">{{description}}</div> 
        <div class=" due-on">Due on:{{d_date}}</div><hr> 
        <div class="subcontent"> 
         {{> actioncardsubcontent}} 
        </div> 
        <div class="reqext"> 
          {{> requestextensioncard}} 
       </div> 
        </div> 
        <div class="due"> 

         Due on: 
         <div> 
          <span class="day-stamp">THU</span><br> 
         <div class="date-stamp">26</div> 
         <div class="month-stamp">AUG 
         </div> 
         </div> 
        </div> 
        </div> 
    <div class="btn-box newaction"> 
     <button type="button" class="cancelsub" >New Action</button> 
     <button type="submit" class="createbtnsub" >Show Options</button> 
    </div> 
    <div class="btn-box showoption"> 
     <button type="button" class="hideoption" style="display:none">Hide Options</button> 
     </div> 

       {{/each}}                                    
     </div> 

私は一度にすべてのカードに機能を停止する方法events..nowに非表示と表示機能を書かれています。ここで

は私のJSです：

Template.workflow.events({ 

    "click .createbtnsub" : function() { 
     $(".subcontent").show(); 
    $('.createbtnsub').hide(); 
     $('.cancelsub').hide(); 
     $('.hideoption').show(); 
     $('.requestextension').show(); 

    }, 
    "click .hideoption": function(){ 
     $('.subcontent').hide(); 

    }, 



     "click .hideoption": function(){ 
     $(".subcontent").hide(); 
     $('.cancelsub').show(); 
     $('.createbtnsub').show(); 
     $('.requestextension').hide(); 
     $('.hideoption').hide(); 
     $('.reqext').hide(); 
    }, 



    "click #createActionBtn": function(){ 

     $('#createAction').hide(); 
     $('.editw').show(); 
     $('.hidew').show(); 
    }, 
}); 

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

Template.requestextensioncard.rendered = function(){ 
    this.$(".reqext").hide(); 

}; 

Template.workflow.helpers({ 
    getWorkflow: function(){ 
     return Workflow.find(); 
    }, 
    user: function(){ 
return Meteor.users.find({}); 
}, 
getNewaction: function(){ 
     return Newaction.find(); 
    }, 

}); 

Answer 1

次のことを確認し、必要に応じてセレクタを調整してください：

 "click .showoption": function(event){ 
     $(event.currentTarget).next('button').show(); 
    } 

しかしこれはヒントとして、私は書き換え推薦、兄弟要素を選択するために動作しますテンプレートデータをデータベースからより具体的なものに戻すtemplate.helper。

インデックスやIDに基づく動的クラスのようなものなので、クラス/ ID名は次のようになります.showoption-12kjddfse4次に、現在のターゲットの属性を取得し、それをjsセレクタに適用するだけです。

また、すべてのボタンが表示されていた理由を示唆しているように、クラスセレクタを使用していますか？これは要素/ノードのグループを取得するためです。これは、ユースケースに対してより具体的なクラス名/ IDを作成する別の理由です。

だからあなたのクラス名にあなたが

<button class="showoption" id="{{_id}}">button</button> 
<button id="hiddenoption-{{_id}}" class="hiddenoption">button</button> 

ような何かを行うことができ、次のように次に、あなたの要素を選択することは容易になるだろう：

'click .showoption'(event) => { 
    let id = event.currentTarget.getAttribute(id); 
    document.getElementById('hiddenoption-'+id).style.display = 'block'; 
}