JQuery PageWalkthrough несколько проходов на одной странице

Question

Я работаю над интерактивным учебным курсом, и из-за количества предметов, охватываемых учебным курсом, я пытаюсь разрушить монотонность и вставить несколько "пошаговых инструкций", чтобы помочь объяснить концепции. Мой вопрос заключается в том, как вставить несколько пошаговых инструкций на одну и ту же страницу и заставить их запускать правильные пошаговые инструкции при нажатии определенной кнопки.

Я использую этот плагин: https://github.com/jwarby/jquery-pagewalkthrough. Хотя я могу заставить каждую пошаговую работу работать независимо друг от друга, если я каким-либо образом объединю код на одной и той же странице, второй проход никогда не сработает.

Следующие блоки кода в настоящее время находятся в файле main.js, Это код для первого прохождения:

$('#division').on('click', function(e){
    $('#division').pagewalkthrough('show');
    $('#division').pagewalkthrough({
        name: 'division',
        steps: [{
            wrapper: '#slide12 ftop',
            popup: {
                content: '#dividewalkthrough-1',
                type: 'modal'
            }
        }],
        onLoad: true
    });
});

И второй проход:

$('#multiply').on('click', function(e){
    $('#multiply').pagewalkthrough('show');
    $('#multiply').pagewalkthrough({
        name: 'multiply',
        steps: [{
            wrapper: '#slide10 .ftop',
            popup: {
                content: '#walkthrough-1',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: '#slide10 .fsol',
            popup: {
                content: '#walkthrough-2',
                type: 'tooltip',
                position: 'bottom',
            },
            onEnter: function(){
                $('#slide10 .fsol').show();
                return true;
            },
            onLeave: function(){
                var bcol3 = $('#slide10 .fsol .bcol3').val(),
                bcol4 = $('#slide10 .fsol .bcol4').val(),
                bcol5 = $('#slide10 .fsol .bcol5').val(),
                bcol6 = $('#slide10 .fsol .bcol6').val();
                if(bcol3 != "" && bcol4 != "" && bcol5 != "" && bcol6 != ""){
                    return true;
                }else{
                    alert('You must fill in each column');
                    return false;
                }
            }
        }, {
            wrapper: '#slide10 .ssol',
            popup: {
                content: '#walkthrough-3',
                type: 'tooltip',
                position: 'bottom'
            },
            onEnter: function(){
                $('#slide10 .ssol').show();
                return true;
            },
            onLeave: function(){
                var bcol3 = $('#slide10 .ssol .bcol3').val(),
                bcol4 = $('#slide10 .ssol .bcol4').val(),
                bcol5 = $('#slide10 .ssol .bcol5').val();
                if(bcol3 != "" && bcol4 != "" && bcol5 != ""){
                    return true;
                }else{
                    alert('You must fill in each column');
                    return false;
                }
            }
        }],
        onLoad: true
    });
});

Я попытался полностью отделить код и поместить блоки кода в разные файлы.js. Я попытался вызвать функцию щелчка со страницы, а не из файла.js. Самое близкое, что я получил к обоим стрельбам правильно, это когда нажата кнопка "деление" (это вторая кнопка в иерархии), показывается "умножение", но если я снова нажму кнопку "деление" после закрытия прохода "умножение" корректно отображается проход "деление".

Какие-нибудь мысли?

Answer 1

Продолжая читать и исследовать, я наткнулся на эту заметку: https://github.com/jwarby/jquery-pagewalkthrough.

Изменяя способ, которым я назвал проходные, они теперь отображаются правильно. Теперь я называю проходную так:

$('#multiply').on('click', function(){
    $.pagewalkthrough('show', 'multiply');
});

Вместо старого способа:

$('#division').on('click', function(e){
    $('#division').pagewalkthrough('show');
});

Надеюсь, это поможет кому-то еще позже.