introJS - игнорировать скрытые или DOM-элементы, которые не существуют - PullRequest
Новая
       7

introJS - игнорировать скрытые или DOM-элементы, которые не существуют

0 голосов
/ 26 июня 2019

Я использую introJS в Angular 7. У меня есть следующая опция настройки: 

introJS = introJs();

this.introJS.setOptions({
          tooltipPosition: 'auto',
          positionPrecedence: ['left', 'right', 'top', 'bottom'],
          showBullets: true,
          showStepNumbers:true,
          steps: [
            {
              element: '#step1',
              intro: "This is step1."
            },
            {
              element: '#step2',
              intro: "This is step 2, but is hidden in DOM."
            },
            {
              element: '#step3',
              intro: "This is step3, but it does not exist in DOM."
            },
            {
              element: '#step4',
              intro: "This is step 4",
            }
          ]
        });

        this.introJS.start();

Этот шаг Параметры статичны, и возможно, что шаги могут быть скрыты или не существуют вДОМ.В этом случае я бы хотел, чтобы тур игнорировал эти шаги и двигался вперед, если элемент DOM с таким идентификатором не виден или не существует в DOM.

Я наткнулся на альтернативу JQuery , для этого, но не знаю, как настроить Angular.

1 Ответ

1 голос
/ 26 июня 2019

Вы можете использовать document.querySelector, чтобы проверить, находится ли элемент в DOM. 

var steps = [
  {
    element: '#step1',
    intro: "This is step1."
  },
  {
    element: '#step2',
    intro: "This is step 2, but is hidden in DOM."
  },
  {
    element: '#step3',
    intro: "This is step3, but it does not exist in DOM."
  },
  {
    element: '#step4',
    intro: "This is step 4",
  }
].filter(function (obj) {
  return document.querySelector(obj.element) !== null;
});

console.log(steps);
<div id="step1"></div>

<div id="step2"></div>

<div id="step4"></div>
...