Question

我提交表单时会动态显示卡片。

这是代码：

    <template name="workflow">

    <div id="newActionCard">

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

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

    </template>

<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();
}
});

我的问题是，当我点击输出处的显示选项按钮时，隐藏部分一次显示每张卡片而不是特定卡片。原因是我为每个人提供了相同的类名，我想创建一个动态ID，以便在点击时特定卡隐藏内容。怎么写。我被困在那里。有人可以帮忙吗？

我尝试使用以下代码，但它不起作用。

<div class="action" id={{_id}}> {{> actioncardsubcontent}} </div>

并且在JS中我用$('.subcontent').show(); var id="#"+this._id;替换了$(id).show();，但它不起作用。让我知道如何为每次点击动态生成ID代码。

Answer 1

您的id={{_id}}解决方案的想法是正确的，但您已将id属性添加到与隐藏的元素不同的元素。试试这个：

<template name="actioncardsubcontent">
  <div class="subcontent" id={{_id}}>
    ...
  </div>
</template>

如果您执行

，上层模板中的事件处理程序仍应找到该元素

$('#' + this._id).show();

如果这没有帮助 ，可能是因为您的数据没有_id属性。在这种情况下，您可以使用其他唯一标识符，或使用Random.id()添加一个。

Answer 2

你可以尝试这个，因为这对我有用。

    function(){
        $('.className').each(function(i) {
          $(this).attr('id', 'idName'+i);
     });

在meteor中，如何使用相同的类名创建动态id

2 个答案: