Question

I want to create a multistep modal using this

我这个div是动态生成的类

$('.modal-content').append('<div class="modal-body step step-' + key + '" data-step="'+key+'"></div>');

现在我想将一个输入变量附加到该div。我尝试这个但是我没有得到任何HTML或错误（我可以正确读取控制台日志）

$.each(inputs, function (index,input) {
    console.log(input);
    $(".modal-body step step-" + key).append(input);
});

如何追加具有多个类的div？

段

＆＃13;

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-footer"></div>';
//Progress
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-content').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\', 1)">Continue</button>');
      
  $('.modal-content').append('</div></form>');
  $('#modalDiv').empty().append(modal);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.ngzhian.com/multi-step-modal/multi-step-modal.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></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>
  sendEvent = function(sel, step) {
    $(sel).trigger('next.m.' + step);
  }
</script>

＆＃13;

Answer 1

要选择具有多个类的div，您应该使用以下代码

$(".modal-body.step.step-" + key).append(input);

Answer 2

主要问题似乎是开头缺少追加：

//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-footer"></div></div></form>');

$('#modalDiv').empty().append(modal);

同样，选择器内的类之间的空格，选择器将使用这些类而不是带有类modal-body+step+step-{key}的元素搜索子元素，如果删除它们，则选择器应该是有效的：

$(".modal-body .step .step-" + key).append(input);
 ______________^____^

应该是：

$(".modal-body.step.step-" + key).append(input);

＆＃13;

sendEvent = function(sel, step) {
  $(sel).trigger('next.m.' + step);
}


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-footer"></div></div></form>');

$('#modalDiv').empty().append(modal);

$.each(testCaseNames, function(key, value) {
  //Headers
  $('.modal-header').append('<h4 class="modal-title step-' + key + '" data-step="' + key + '">' + value + '</h4>');
  //Body
  $('.modal-content').append('<div class="modal-body step step-' + key + '" data-step="' + key + '"></div>');
  $.each(inputs, function(index, input) {
    $(".modal-body.step.step-" + key, modal).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\', 1)">Continue</button>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.ngzhian.com/multi-step-modal/multi-step-modal.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></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>

＆＃13;

Answer 3

将数据“附加”到div后，它将作为文本而不是DOM元素添加到DOM中。，尝试这样的事情

    // Get the element you want to add your new element before or after
var target = document.querySelector('#some-div');

// Create the new element
// This can be any valid HTML element: p, article, span, etc...
var div = document.createElement('div');

// Add content to the new element
div.innerHTML = 'Your content, markup, etc.';

// You could also add classes, IDs, and so on
// div is a fully manipulatable DOM Node

// Insert the element before our target element
target.parentNode.insertBefore( div, target );

// Insert the element after our target element
target.parentNode.insertBefore( div, target.nextSibling );

Answer 4

实际上你试图追加到DOM中尚未显示的模态。

只需放置此行

即可

$('#modalDiv').empty().append(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-footer"></div>';
//Progress
modal += '';

应该看起来像

modal += '';
$('#modalDiv').empty().append(modal);

它将解决您的问题

使用Jquery创建多步模态

4 个答案: