使用jQuery处理加载可变数量的模态的最佳方法是什么？

Question

我希望了解最佳流程，而不是使用代码。

我有不同数量的模态，它们是根据第一个答案动态生成的，每个模态都有一个问题。 我的问题是：

什么是处理当前模态然后在给定可变数量的模态的情况下加载下一个模态的最佳方法，还要知道该过程何时完成。 我收集了某种循环吗？

我将使用AJAX提交数据，并使用jQuery加载模态。 我目前在HTML中加载了所有模态，并带有单独的ID和第一个模态显示。

    //Form 1 Submit- Home Page (Sumbits home form and displays diagnosis form)

$('.close').on('click', function () {
    window.location.reload(true);
})

$('#continue_btn').on('click', function () {
$('#enq_2').remove();
  var form = $("#form_1");
  var app = $("[name='appliance']", form).val();


var a = $('#form_1').serialize();
var url = $('#form_1').attr('action');
var type = $('#form_1').attr('method');
console.log(a);
    $('#form_1').submit(function(event) {

        event.preventDefault();
        var formElem = $(event.currentTarget);

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type        : type,
                        url         : url,
                        data        : a,
                        dataType    : 'json'


                            })
                            .done(function(response){
                                console.log("Done!");
                            //    $('#myModal').modal('show'); //Show Type
                                var enquiry_number = response.enquiry;
                                var questions = response.questions;
                                var question_title = response.question_title;
                                var answ = response.answers;
                                console.log(questions[0].question);

                               $('#customer_enquiry_id').attr('value', enquiry_number)

                                $.each(questions, function (index, value) {
                                    $( ".modals" ).append('<div id="myModal_'+index+'" class="modal" role="dialog" data-backdrop="static" data-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title" id="myModal_title">'+value.question+'</h4></div><div class="modal-body"></div><div id="form_2_check"><div class="modal-footer"><button type="button" class="btn btn-success" id="close_modal_1">Next</button></div></div></div></div></div>');

                                });

                               $('#myModal_0').modal('show'); //Show Type

                                })

                                   .fail(function(jqXHR, textStatus, errorThrown){
                                    console.log("Fail!", jqXHR, textStatus, errorThrown);
                                });
                            });
$('#form_1').submit();
});

谢谢

Answer 1

如果您愿意使用第三方库-您可以查看SweetAlert2库，它使您可以很好地完成此操作；

https://limonte.github.io/sweetalert2/