使用Javascript创建html

Question

I want to create a multistep modal using this正如您所看到的，导入是相同的，HTML是相同的。唯一的区别是我正在使用javascript。

问题是我的模态不是步骤，而是在同一页面中。

是什么造成的？有没有办法在我运行后执行他们的javascript文件？我不知道......似乎它没有使用他们的js文件。

$("body").on('click', '#btnSubmit', function(e) {

  var testCaseNames = ['test1', 'test2'];
  var inputs = ['test3', 'test4'];

  //Modal
  var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-step-body"></div><div class="modal-footer"></div></div></form>';
  
   $('#modalDiv').empty().append(modal);
  
  $.each(testCaseNames, function(key, value) {
    console.log(key + ": " + value);
    console.log(inputs);
    //Headers
    $('.modal-header').append('<h4 class="modal-title step-' + key + '" data-step="' + key + '">' + value + '</h4>');
    //Body
    $('.modal-step-body').append('<div class="modal-body step step-' + key + '" data-step="' + key + '"></div>');
    $.each(inputs, function(index, input) {
      console.log(input);
      $(".modal-body.step.step-" + key).append(input);
    });
    //Footer Buttons
    $('.modal-footer').append('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>');
    $('.modal-footer').append('<button type="button" class="btn btn-primary step step-' + key + '" data-step="' + key + '" onclick="sendEvent(\'#creationModal\', ' + key + ')">Continue</button>');


  });
});

sendEvent = function() {
  $('#creationModal').trigger('next.m.2');
};

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<button type="submit" class="btn btn-rounded btn-success-outline top10" data-toggle="modal" data-target="#creationModal" id="btnSubmit">Create</button>


<div id='modalDiv'></div>

<script src="https://www.ngzhian.com/multi-step-modal/multi-step-modal.js"></script>

Answer 1

$ .each就像一个for循环。所以你只需一次性添加所有步骤。您需要在按钮单击或您正在使用的任何内容上一个接一个地调用它们。

EG

function modalStep(int step){
    ...
}

你需要像下一个按钮那样添加onclick =“modalStep（1）”之类的东西。

您也可以使用点击功能之外的计数器。每次点击都会增加计数器并显示下一步。

编辑（未经测试，只是为了向您展示这个想法）：

var testCaseNames = ['test1', 'test2'];
var inputs = ['test3', 'test4'];

//Modal
var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-step-body"></div><div class="modal-footer"></div></div></form>';

var counter = 0;

function showModal(key, value) {
    console.log(key + ": " + value);
    console.log(inputs);
    //Headers
    $('.modal-header').append('<h4 class="modal-title step-' + key + '" data-step="' + key + '">' + value + '</h4>');
    //Body
    $('.modal-step-body').append('<div class="modal-body step step-' + key + '" data-step="' + key + '"></div>');
    $.each(inputs, function(index, input) {
      console.log(input);
      $(".modal-body.step.step-" + key).append(input);
    });
    //Footer Buttons
    $('.modal-footer').append('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>');
    $('.modal-footer').append('<button type="button" class="btn btn-primary step step-' + key + '" data-step="' + key + '" onclick="sendEvent(\'#creationModal\', ' + key + ')">Continue</button>');

  }

$("body").on('click', '#btnSubmit', function(e) {

   $('#modalDiv').empty().append(modal);  
   showModal(counter, testCaseNames[counter]);
   counter = (counter+1)%testCaseNames.length;

   console.log("counter: "+counter);
});