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

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

Я использую этот плагин: 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. Самое близкое, что я добрался до обоих выстрелов правильно, - это когда нажата кнопка "деление" (вторая кнопка в иерархии), "многократные" сквозные шоу, но если я снова нажму кнопку "деление" после закрытия "многократного" прохода, прокрутка "деления" отображается правильно.

Есть предположения?

1 ответ

Выполняя больше исследований и исследований, я наткнулся на эту заметку: https://github.com/jwarby/jquery-pagewalkthrough#showname.

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

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

Вместо старого пути:

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

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

licensed under cc by-sa 3.0 with attribution.