Игнорировать отсутствующий элемент для тура в tour.js

Question

Я использую intro.js на динамической странице, и если присутствуют все предоставленные элементы, тур проходит нормально, без каких-либо проблем.

Но если какой-либо элемент отсутствует, страница динамически генерируется, тур останавливается и должен дважды нажать кнопку NEXT, чтобы продолжить.

Есть ли способ пропустить шаг в целом, если элемент отсутствует?

Пример:

intro.setOptions({ 
    steps[ 
     {"element":".ow_status","intro":"status"}, 
     {"element":".ow_mailbox","intro":"mailbox"}, 
     {"element":".ow_test","intro":"test"} 
    ] 
}); 

В приведенном выше примере, если элемент с классом ow_mailbox нет, тур останавливается в середине, и это показывает, 3 шага, хотя только 2 с действительным элементом.

Answer 1

Мы можем фильтровать массив и возвращать только те элементы, которые существуют. Новые параметры будут выглядеть так:

intro.setOptions({ 
    steps: [ 
     {"element":".ow_status","intro":"status"}, 
     {"element":".ow_mailbox","intro":"mailbox"}, 
     {"element":".ow_test","intro":"test"} 
    ].filter(function (obj) { 
     return $(obj.element).length; 
    }) 
}); 

Answer 2

У меня была аналогичная проблема, но на отзывчивом шаблоне. В зависимости от области просмотра мои элементы присутствовали, но были скрыты. Я должен был использовать этот код.

intro.setOptions({ 
    steps: [ 
    {"element":".ow_status","intro":"status"}, 
    {"element":".ow_mailbox","intro":"mailbox"}, 
    {"element":".ow_test","intro":"test"} 
    ].filter(function (obj) { 
    $(obj.element).is(':visible'); 
    }) 
}); 

Answer 3

Чтобы улучшить только немного ответ @Neil и позволяют плавучие шаги тоже, просто добавьте это:

intro.setOptions({ 
    steps: [ 
     {"element":".ow_status","intro":"status"}, 
     {"element":".ow_mailbox","intro":"mailbox"}, 
     {"element":".ow_test","intro":"test"} 
    ].filter(function (obj) { 
     return $(obj.element).length || obj.element == ".introjsFloatingElement";; 
    }) 
});