在流星中如何在单击按钮时隐藏表单？答案

【问题标题】：In meteor how to hide a form on click of a button?在流星中如何在单击按钮时隐藏表单？
【发布时间】：2016-08-19 14:18:42
【问题描述】：

我正在尝试通过单击卡片中的按钮来显示表单，并且按钮应该隐藏并显示表单。但它没有显示。我以为我已经写了写代码但没有得到。可以帮我看看我的代码有什么错误。

<div id="wCard">

                 {{#each workflow}}

                 <div class="module-card">
                    <div class="card-header wfmodule">Cast for '{{project}}'</div>
                    <div class="assigned-tag">Assigned To:</div>
                    <div class="assigned-to">{{team}}<hr></div>
                    <div class="actions">No Actions Created</div>
                    <div class="due-on">Due on:{{d_date}}</div>
                </div>

               <div><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>


                {{/each}}

    </div>

下面是我点击上面代码中的新操作按钮时应该显示的表单。

<!-- create new action -->


        <div class="workflow" id="createAction">
       <form class="workflow-action-form" method="post" id="actionForm">
              <div> <input type="text" class="flow-title" name="actionTitle" placeholder="New Action Name" /></div>

              <div class="form-line"></div>

           <fieldset class="form-group">
          <textarea class="form-control" id="skills" name="description" placeholder="Description" required></textarea>
        </fieldset>
        <fieldset class="form-group">
            <select class="form-control m-b" name="team" required>
                <option value="" selected="selected">Assign to Team or People</option>
                                        <option>Production Team</option>
                                        <option>Production Team 1</option>
                                        <option>Production Team 2</option>
                                        <option>Production Team 3</option>
            </select>
        </fieldset>

        <div class="row">
            <div class="col-md-6">
        <fieldset class="form-group">
                    <div class='input-group date' id='datetimepicker3'>
                        <span class="input-group-addon">
                            <span class="fa fa-calendar"></span>
                            </span>
                        <input type='text' class="form-control" name="s_date" placeholder="Start Date" required/>
                     </div>
            </fieldset> 
            </div>
            <div class="col-md-6">
           <fieldset class="form-group">
                    <div class='input-group date' id='datetimepicker4'>
                         <span class="input-group-addon">
                            <span class="fa fa-calendar"></span>
                            </span>
                        <input type='text' class="form-control" name="d_date" placeholder="Due Date" required/>
                    </div>
            </fieldset>
            </div>
           </div>
            <fieldset class="form-group">
                <select class="form-control m-b" name="link" required>
                    <option value="" selected="selected">Link to Meeting or Event</option>
                                        <option>option 1</option>
                                        <option>option 2</option>
                                        <option>option 3</option>
                                        <option>option 4</option>
                </select>
            </fieldset>
        <fieldset class="form-group">
          <select class="form-control m-b" name="project" required>
              <option value="" selected="selected">Create a Path</option>
                                        <option>option 1</option>
                                        <option>option 2</option>
                                        <option>option 3</option>
            </select>
        </fieldset>
        <fieldset class="form-group">
          <textarea class="form-control" id="skills" name="notes" placeholder="Notes" required></textarea>
        </fieldset>
      <div class="flex-btn-force-right">

        <div class="btn-box">
          <button type="button" class="btn btn-info" id="cancelActionBtn">Cancel</button>&nbsp; &nbsp;
          <button type="submit" class="btn btn-info" id="createActionBtn">Create</button>
        </div>
      </div>

    </form>


    </div>

而JS是：

$(document).ready(function(){ 
$('#newAction').click(function(){
                   $('#newAction').hide();
                    $('#createAction').show();

                });
});

【问题讨论】：

createAction 表单是否在页面加载时隐藏？
是的。它被隐藏了。
从我这里开始工作
卡片是从其他表单动态生成的，如果我将按钮标签放在 {{/each}} 之后，则单击按钮可以工作。但是我希望在创建卡片时按钮应该动态出现。

标签： javascript jquery html meteor

【解决方案1】：

我认为这是一个相同的身份问题。

<div id="wCard">
             {{#each workflow}}
             <div class="module-card">
                <div class="card-header wfmodule">Cast for '{{project}}'</div>
                <div class="assigned-tag">Assigned To:</div>
                <div class="assigned-to">{{team}}<hr></div>
                <div class="actions">No Actions Created</div>
                <div class="due-on">Due on:{{d_date}}</div>
            </div>      


            {{/each}}   
<div><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>

</div>

每个人都在错误的地方。

【讨论】：