在流星中，如何创建具有相同类名的动态 id答案

【问题标题】：In meteor, how to create dynamic id with same class name在流星中，如何创建具有相同类名的动态 id
【发布时间】：2016-09-16 20:25:28
【问题描述】：

我在提交表单时有一张卡片动态显示。

代码如下：

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

【问题讨论】：

标签： javascript jquery meteor

【解决方案1】：

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

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

如果你这样做了，你在上层模板中的事件处理程序应该仍然可以找到元素

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：