忽略tour.js中游览的缺失元素

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

但是，如果任何元素不存在，页面被动态生成，游览停止并且必须按两次NEXT按钮才能继续。

如果元素不存在，有什么办法可以跳过这一步吗？

实施例：

intro.setOptions({ 
    steps[ 
     {"element":".ow_status","intro":"status"}, 
     {"element":".ow_mailbox","intro":"mailbox"}, 
     {"element":".ow_test","intro":"test"} 
    ] 
});

在上述示例中，如果与类ow_mailbox的元素不存在，则游在中途停止，它显示了3个步骤虽然只有2是有效的元素。

来源

2014-01-15 Purus

我们可以过滤数组并只返回存在的元素。新选项看起来像这样：

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

来源

2014-01-15 16:08:33

哇。你让问题看起来很傻:)非常感谢。 – Purus

我有一个类似的问题，但在响应模板。根据视口，我的元素存在但隐藏。我必须改用这个代码。

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

来源

2014-02-21 07:47:22 helloJello

intro.js的新版本修复了与我的问题相关的问题。所以你可以试试。 – Purus

我试过7.0，它仍然包括隐藏元素左上角的步骤。这是我唯一的选择。 – helloJello

为了提高只是有点@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";; 
    }) 
});

来源

2016-05-23 17:26:57 aleksdj

忽略tour.js中游览的缺失元素

回答

相关问题