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

【问题标题】：introJS - ignore hidden or DOM elements that don't existintroJS - 忽略不存在的隐藏或 DOM 元素
【发布时间】：2019-06-26 03:19:04
【问题描述】：

我在 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 进行调整。

【问题讨论】：

标签： angular intro.js

【解决方案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>

【讨论】：

【解决方案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;
});

【讨论】：