javascript - 在 meteor 中如何停止功能一次工作？

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 中，我已经在事件中编写了隐藏和显示功能。现在如何一次停止所有卡片的功能。

这是我的 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';
}