当用户点击“保存”时清除模态数据

Question

我有一个使用 Bootstrap 和 jQuery 的多部分模式向导。当用户进入模态的第 3 部分并单击“保存”时，我想擦除数据 - 因为现在当我重新打开模态时，它会重新加载到第 3 部分，而不是从第 1 步重新开始，这是它应该做的。

这是我的 HTML：

    <div class="form-group" id="repeat-every-div">
      <label>Repeat Every</label>
      <input type="text" class="job-repeat-every form-control" data-toggle="modal" data-target="#scheduleModal">
    </div>

    <div id="scheduleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Recurring Job Steps</h3>
          </div>
          <div class="modal-body" id="myWizard">

            <div class="tab-content">
              <div class="tab-pane fade in active" id="step1">

                <div class="well">

                  <label>Recurring Interval</label>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="daily" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Daily</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="weekly" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Weekly</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="monthly" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Monthly</label>
                  </div>
                </div>
                <!-- <a class="btn btn-default next" href="#step2">Continue</a> -->
                <a class="btn btn-default next" href="#weeklyOptions" data-toggle="tab" data-step="2">Continue</a>
              </div>
              <!-- <div class="tab-pane fade" id="weekly-options"> -->
              <div class="tab-pane fade" id="weeklyOptions">
                <div class="well">
                  <label>Day of the Week</label>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="monday" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Monday</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="tuesday" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Tuesday</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="wednesday" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Wednesday</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="thursday" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Thursday</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="friday" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Friday</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="saturday" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Saturday</label>
                  </div>
                  <div class="form-check">
                    <input type="radio" class="form-check-input" id="sunday" name="materialExampleRadios">
                    <label class="form-check-label" for="materialUnchecked">Sunday</label>
                  </div>
                </div>
                <a class="btn btn-default next" href="#step3" data-toggle="tab" data-step="3">Continue</a>
              </div>
              <div class="tab-pane fade" id="step3">
                <div class="md-form mx-5 my-5">
                  <input type="time" id="inputMDEx1" class="form-control">
                  <label for="inputMDEx1">Choose your time</label>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" data-dismiss="modal" id="save-recurring-job">Save</button>
          </div>
        </div>
      </div>
    </div>

这就是我在用户点击“保存”按钮时所调用的内容：

$("#save-recurring-job").click(
  function (event) {
    $("#scheduleModal").removeData();
  }
);

正如我所提到的，目前这不起作用。当我重新打开模式时，第 3 部分重新加载最后输入的数据仍然存在。当用户点击“保存”时，我需要在这里做什么来清除所有数据？

Answer 1

要重置数据，您可以将其包装在<form> 标记中并调用form reset 函数以返回初始状态。

至于活动标签，看起来它使用了active 类，因此您可以将该类添加到第一个类，并通过classList.add/classList.remove 在关闭（或打开）时从任何其他类中删除。