Question

我有一张带按钮的卡片，在提交表格后动态生成。我想通过按钮切换来点击卡片中的按钮来显示内容。当我点击切换按钮时，下一步的过程相同。

我的问题是我可以说我有2张卡（Card1和card2）。当我点击第一张卡的按钮时，点击功能适用于两张卡。但它应该适用于卡1.这是我面临的问题。任何人都可以帮忙吗？

这是我的代码：

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

                    {{> requestextensioncard}} 

               </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" id={{_id}} >

                <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 class="btn-box showoption">
          <button type="button" class="hideoption">Hide Options</button>
          <button type="submit" class="requestextension">Request Extension</button>

        </div> 



      </div>


    </template> 

     <template name="requestextensioncard" id={{_id}}>

        <div class="reqext">

            <fieldset   class="form-group">
              <div class="request-title">Request Extension:</div><br>
          <textarea class="form-control" id="skills" name="description" placeholder="Description" required style="height: 100px;"></textarea>
        </fieldset>
        <fieldset class="form-group">
            <select class="form-control m-b" name="lengthOfExt" required>
                <option value="" selected="selected">Enter length of request </option>
                                       <option>One Day</option>


            </select>
        </fieldset>
     <div class="btn-box requestcard">
          <button type="button" class="cancelrequest">Cancel Request</button>
          <button type="submit" class="submitrequest">Submit Request</button>
        </div>


        </div> 

      </template>

和JS：

 "click .createbtnsub" : function() {

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

}

 "click .requestextension" : function(){

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

我想要显示{{＆gt; actioncardsubcontent}}点击＆＃34;显示选项＆＃34;按钮移到。并且必须显示{{＆gt;请求扩展}}模板点击＆＃34;请求Extenion＆＃34;按钮。我尝试为两个模板提供动态ID，但它可以正常使用一个模板，但不能同时为两个模板使用相同的ID。

Answer 1

我不确定它是否会起作用，但你仍然可以尝试一下。

您只需尝试$('#'+this._id).show();

，而不是$(this).show()

在_id中也看不到this属性。可能您只是引用id。

Answer 2

使用$(selector)而不是使用this.$(selector)来获取元素。不同的是，第二个只查找模板实例中包含的元素。提到here。

现在试试这段代码：

HTML：

<template name="workflow">
  <div id="newActionCard">
    {{#each newaction}}
      {{> workflowcard}}
    {{/each}}
  </div>
</template>

<template name="workflowcard">
  <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}}
      {{> requestextensioncard}}
    </div>
    <div class="btn-box">
      <button type="button" class="cancelsub">New Action</button>
      <button type="submit" class="createbtnsub">Show Options</button>
    </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 class="btn-box showoption">
        <button type="button" class="hideoption">Hide Options</button>
        <button type="submit" class="requestextension">Request Extension</button>

    </div>
  </div>
</template>

<template name="requestextensioncard">
  <div class="reqext">
    <fieldset class="form-group">
        <div class="request-title">Request Extension:</div><br>
        <textarea class="form-control" name="description" placeholder="Description" required style="height: 100px;"></textarea>
    </fieldset>
    <fieldset class="form-group">
        <select class="form-control m-b" name="lengthOfExt" required>
          <option value="" selected="selected">Enter length of request </option>
          <option>One Day</option>
        </select>
    </fieldset>
    <div class="btn-box requestcard">
        <button type="button" class="cancelrequest">Cancel Request</button>
        <button type="submit" class="submitrequest">Submit Request</button>
    </div>
  </div>
</template>

JS：

Template.workflowcard.events({
  'click .createbtnsub': function() {
    this.$('.subcontent').show();
  },
  'click .requestextension': function() {
    this.$('.reqext').show();
  }
});

如何在单个模板中处理多个动态ID

2 个答案: