如何阻止功能一次工作？

Question

在meteor中，我在提交表單後動態創建了一張卡片。動態卡包含顯示和隱藏按鈕。當我點擊顯示選項按鈕時，隱藏部分顯示所有卡片而不是該特定卡片。問題是卡正在動態創建，所以我認爲這是問題。如何使功能分別工作到每張卡。

這裏我附上代碼：

<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> 

在JS我已經寫在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'; 
}