关闭模态时如何从模态体中删除内容？

Question

我的目标是每次打开时都显示一个新的模式。目前，只有在刷新页面后第一次显示模态窗口时才如此。对于模态框的后续关闭/打开，它只是将当前内容附加到上一个内容的末尾，仍然显示。

值得注意的是，经过无数次尝试的这种特殊配置，我得到了一个

未捕获的引用错误：$ 未定义

在我的 Javascript 控制台中用于该行

$(document).ready(function() { 

但我不知道为什么。毕竟，jQuery 库 (3.2.1) 已针对正在使用的脚本类型进行了初始化。有什么线索吗？

<!-- Form -->
<form onsubmit="return false">

  <!-- Heading -->
  <h3 class="dark-grey-text text-center">
    <strong>Calculate your payment:</strong>
  </h3>
  <hr>

  <div class="md-form">
    <i class="fa fa-money prefix grey-text"></i>
    <input type="text" id="income" class="form-control">
    <label for="income">Your income</label>
  </div>

  <div class="text-center">
    <button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
    <script type='text/javascript'>
      function calculator() {
        let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
        payment = Math.round(payment);
        if (payment <= 0) {
          $('.modal-body').append("$0 per month.");
        }
        else {
          $('.modal-body').append(payment + " or less per month.");
        }
       }
    </script>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="test" class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Clear content from modal -->
    <script type="text/javascript">
      $(document).ready(function() {
        $('.exampleModal').on('hidden.bs.modal', function () {
          $('.modal-body').clear();
        });
      });
    </script>
    <hr>
    <label class="grey-text">* This is just an estimate. Please call for a quote.</label>
    </fieldset>
  </div>

</form>
<!-- Form -->

Answer 1

您应该使用.html 或.text 而不是.append

if (payment <= 0) {
  $('.modal-body').text("$0 per month.");
}
else {
  $('.modal-body').text(payment + " or less per month.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
            <form onsubmit="return false">

              <!-- Heading -->
              <h3 class="dark-grey-text text-center">
                <strong>Calculate your payment:</strong>
              </h3>
              <hr>

              <div class="md-form">
                <i class="fa fa-money prefix grey-text"></i>
                <input type="text" id="income" class="form-control">
                <label for="income">Your income</label>
              </div>

              <div class="text-center">
                <button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
                <script type='text/javascript'>
                  function calculator() {
                    let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
                    payment = Math.round(payment);
                    if (payment <= 0) {
                      $('.modal-body').text("$0 per month.");
                    }
                    else {
                      $('.modal-body').text(payment + " or less per month.");
                    }
                  }
                </script>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div id="test" class="modal-body">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Clear content from modal -->
                <script type="text/javascript">
                  $(document).ready(function() {
                    $('.exampleModal').on('hidden.bs.modal', function () {
                      $('.modal-body').clear();
                    });
                  });
                </script>
                <hr>
                <label class="grey-text">* This is just an estimate. Please call for a quote.</label>
                </fieldset>
              </div>

            </form>
            <!-- Form -->

Answer 2

尝试使用$('modal-body').empty() 而不是clear