忽略 tour.js 中缺少的游览元素答案

【问题标题】：Ignore missing element for the tour in tour.js忽略 tour.js 中缺少的游览元素
【发布时间】：2014-02-04 04:52:21
【问题描述】：

我在动态页面中使用 intro.js，如果提供的所有元素都存在，则游览顺利进行，没有任何问题。

但如果任何元素不存在，页面将动态生成，游览会停止，必须按两次下一步按钮才能继续。

如果元素不存在，有没有办法完全跳过这一步？

示例：

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

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

【讨论】：

哇。你让问题看起来很傻:)非常感谢。
这假设总是有一个目标元素。如果在游览之间我有一个不针对任何元素的步骤怎么办？
如何在 Angular 7 中做到这一点，而不是使用 JQuery？

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

【讨论】：

intro.js 的新版本修复了与我的问题相关的问题。所以你可以试试。
我尝试了7.0，它仍然包括隐藏元素左上角的步骤。这是唯一对我有用的选项。

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

【讨论】：