javascript - 在 meteor 中，如何创建具有相同类名的动态ID

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() 添加一个标识符。