javascript - 在 meteor 中，如何通过单击按钮隐藏表单？

Question

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

<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();

                });
});

Answer 1

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

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

每个都在错误的地方。