忽略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中游覽的缺失元素

回答

相關問題