立即隐藏和显示动态ID的功能

时间:2016-09-20 06:16:14

标签: javascript jquery html meteor

我有在表单提交后动态创建的按钮。

<template name="workflow">
  {{#each newaction}}
<div class="btn-box" >
{{> actioncardsubcontent}}

      <button type="button" class="cancelsub"  >New Action</button>
      <button type="submit" class="createbtnsub" >Show Options</button>
    </div>

{{/each}}
</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> 

和我的JS是:

Template.workflow.events({
 "click .createbtnsub" : function(){

      $("#"+this._id).show();
      $('.createbtnsub').hide();
      $('.cancelsub').hide();

使用上面的Js,当我点击特定卡片时,它隐藏了所有卡片按钮。所以任何人都可以纠正我。如何为这些按钮编写动态ID,使其适用于特定卡片。

1 个答案:

答案 0 :(得分:0)

请尝试一下:

Template.workflow.events({
 "click .createbtnsub" : function(){

      $('.createbtnsub').hide();
      $('.cancelsub').hide();


      $(this).show();