introJS - 忽略隐藏的或 DOM 不存在的元素

Question

我在 Angular 7 中使用 introJS。我有以下设置选项：

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 中。在这种情况下，如果具有该 ID 的 DOM 元素不可见或在 DOM.

中不存在，我希望游览忽略这些步骤并继续前进

为此，我遇到了一个 JQuery alternative，但不知道如何针对 Angular 进行调整。

Answer 1

您可以使用 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>

Answer 2

@pindev 回答不允许未附加到页面元素的步骤。 IE。一个通用的步骤，出现在页面的中央。将 step.element 属性设置为 null 将实现此目的。这对我有用，可以过滤掉隐藏了 html 元素的步骤。

var steps = steps.filter(function (obj) {   // filter out any steps for hidden elements
    var useElement = true;

    if (obj.element !== null) {
        if ($(obj.element).is(':visible') === false) {
            useElement = false;
        }
    }

    return useElement;
});

introJS - 忽略隐藏的或 DOM 不存在的元素

introJS - ignore hidden or DOM elements that don't exist

intro.js

angular