Question

我正在尝试制作像这样的多页模式（最后一个按钮）：https://www.ngzhian.com/multi-step-modal/

但是当我运行脚本时，我只得到这个HTML。我在这里失踪了什么？我没有收到任何错误。

var testCaseNames = ['test', 'test2'];

 //Modal
var testCaseNames = ['test', 'test2'];

//Modal
var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
//Progress
modal += '<div class="m-progress"><div class="m-progress-bar-wrapper"><div class="m-progress-bar"></div><div class="m-progress-stats"><span class="m-progress-current"></span>/<span class="m-progress-total"></span></div><div class="m-progress-complete">Completed</div></div>';

$.each(testCaseNames, function(key, value) {
  //Headers
  $('.modal-header').html('<h4 class="modal-title step-' + key + ' data-step="' + key + '"</h4>');
  //Body
  modal += '<div class="modal-body step-' + key + '" data-step="' + key + '">' + value + '</div>';
  // //Footer Buttons
  modal += '<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>';
  modal += '</div></div></form>';
});

$('#modalDiv').empty().html(modal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="modalDiv">
  <form class="modal multi-step in" id="creationModal" style="display: block; padding-right: 17px;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title step-0" data-step="0"> </h4></div>
      </div>
    </div>
  </form>
</div>

Answer 1

在同一函数中多次更改元素的innerHTML时会发生错误。尝试拨打.html()一次，就像在此行$('#modalDiv').empty().html(modal);

一样

取代此行$('.modal-header').html('...');，继续在modal变量中添加html文字。

使用Javascript或Jquery附加Html

1 个答案: