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

Я использую 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 с допустимым элементом.


javascript jquery intro.js
person Purus    schedule 15.01.2014    source источник

Ответы (3)


arrow_upward
17
arrow_downward

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

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;
   })
});
person Neil Kistner    schedule 15.01.2014
comment
Вот это да. Вы сделали проблему глупой :) Большое спасибо. - person Purus; 15.01.2014
comment
Это предполагает, что всегда есть целевой элемент. Что, если в промежутке между туром у меня есть шаг, который не нацелен ни на один элемент? - person Julio de Leon; 30.05.2018
comment
Как я могу сделать это в Angular 7, не используя JQuery? - person Jake; 25.06.2019

arrow_upward
3
arrow_downward

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

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');
  })
});
person helloJello    schedule 21.02.2014
comment
В новой сборке intro.js есть исправления, связанные с моей проблемой. Так что вы можете попробовать это. - person Purus; 21.02.2014
comment
Я попробовал 7.0, и он все еще включал шаги в верхнем левом углу для скрытых элементов. Это был единственный вариант, который у меня сработал. - person helloJello; 22.02.2014

arrow_upward
1
arrow_downward

Чтобы немного улучшить ответ @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";;
   })
});
person aleksdj    schedule 23.05.2016