使用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/