流星中的動態按鈕單擊隱藏和顯示功能

Question

提交表單后，我在動態生成的卡片上具有隱藏和顯示功能。

{{#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">Hide Option</button>
      <button type="submit" class="createbtnsub">Show Options</button>
    </div>

    </div>

            </div>

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

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

當我單擊顯示選項按鈕時，將顯示動作卡子內容，而當我單擊隱藏選項時，它將隱藏。 問題是，當我單擊單個卡片時，隱藏和顯示功能適用於一次動態創建的所有卡片。 我知道原因是我給按鈕指定了類名。 那么如何停止它並使它工作到當前目標。

這是我的JS：

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

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

Answer 1

您需要做的是為卡片div類屬性的每次迭代賦予唯一的ID。

在JSTL中通常具有indexId屬性。 您可以使用它並設置您的課程。

樣品：

{{#each newaction indexId="i"}}
{{/each}}  

  <div class="btn-box">
      <button type="button" class="cancelsub<%=i%>">Hide Option</button>
      <button type="submit" class="createbtnsub<%=i%>">Show Options</button>
    </div>

在您的JavaScript中：

用我藏起來。

Answer 2

您在這里有幾個選擇。 我更喜歡將{{#each}}放入自己的模板中。 如果這樣做，則可以將按鈕單擊事件放在子模板事件的內部，這使操作數據更加簡單。 一個例子：

范本：

<template name='workflow'>
    {{#each newaction}}
        {{> card}}
    {{/each}}
</template>

<template name='card'>
    <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>

        <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">Hide Option</button>
            <button type="submit" class="createbtnsub">Show Options</button>
        </div>
        </div>
    </div>
</template>

Javascript（ template。$ docs ）：

Template.cards.events({
    "click .createbtnsub":function(event, template){
        template.$('.subcontent').show();
    },
    "click .cancelsub":function(event, template){
        template.$('.subcontent').hide();
    }
});

- 要么 -

您可以做一個更好的DOM查詢。

如果沒有關於actioncardsubcontent模板中實際內容的更多信息或適當的測試，這是對您要查找的內容的最佳猜測。 您應該能夠通過反復試驗輕松地調整此查詢，以滿足您的特定需求。 請閱讀jQuery Traversing文檔，因為它應該為您清除了一點。

Template. workflow.events({
    "click .createbtnsub":function(event, template){
       $(event.target).siblings('.due').find('.subcontent').show();
    },
    "click .cancelsub":function(event, template){
       $(event.target).siblings('.due').find('.subcontent').hide();
    }
});