Question

我在动态页面中使用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个具有有效元素。

Answer 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;
   })
});

Answer 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');
  })
});

Answer 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";;
   })
});

忽略tour.js中巡视的缺失元素

3 个答案: