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

您需要做的是为您的card div class属性的每次迭代提供一个唯一的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

你有几个选择。我更喜欢的是将26, SL, 547.58, -37.42中的所有内容放入自己的模板中。如果这样做，您可以将按钮单击事件放在子模板的事件中，这样可以更轻松地操作数据。一个例子：

模板：

{{#each}}

Javascript（template.$ docs）：

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

- 或 -

您可以进行更好的DOM查询。

如果没有关于Template.cards.events({ "click .createbtnsub":function(event, template){ template.$('.subcontent').show(); }, "click .cancelsub":function(event, template){ template.$('.subcontent').hide(); } });模板中的实际内容或正确测试的更多信息，这是对您要查找的内容的最佳猜测。您应该能够通过反复试验轻松调整此查询以满足您的特定需求。请阅读jQuery Traversing docs，因为它应该为您清楚一点。

actioncardsubcontent

动态按钮单击隐藏并在Meteor中显示功能

2 个答案: