我正在使用 introjs 构建我的应用程序之旅。我已经在网上和文档中搜索了很多地方，但似乎无法在任何地方找到如何在跳过或单击完成后运行功能的方法。我正在尝试这样做，以便存储 cookie 并且在用户请求它或新用户访问该站点之前不会再次运行游览。任何帮助都会很棒，谢谢！
$(function(){
var introguide = introJs();
introguide.setOptions({
showProgress: true,
steps: [
{ hidden }
]
});
introguide.start();
});
【问题讨论】：
标签： javascript jquery intro.js
此代码允许存储旅游信息
var introguide = introJs();
window.addEventListener('load', function () {
var doneTour = localStorage.getItem('MyTour') === 'Completed';
if (doneTour) {
return;
}
else {
introguide.start()
introguide.oncomplete(function () {
localStorage.setItem('MyTour', 'Completed');
});
introguide.onexit(function () {
localStorage.setItem('MyTour', 'Completed');
});
}
});
【讨论】：
是的，有一种方法，但有一些注意事项。
首先，加载 intro.js 后，您将拥有一个名为 introJs 的全局变量，其属性为 fn（标准 jquery 插件方法）。
通过使用 introJS.fn 下的oncomplete() 函数设置函数，您可以在用户点击“完成”按钮时执行一些操作。
这是一个仅显示控制台消息的示例：
introJs.fn.oncomplete(function() { console.log("Finished"); });
这按预期工作。在包含 intro.js 库后，您可以随时将其放入脚本中。
但是，如果您处于最后一步，“跳过”按钮功能只会调用“未完成”处理程序。代码的作者认为代码不完整，因此不会运行该代码，正如您从代码中的这段摘录中看到的那样：
skipTooltipButton.onclick = function() {
if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
self._introCompleteCallback.call(self);
}
_exitIntro.call(self, self._targetElement);
};
这基本上说它必须在最后一步才能考虑调用完整的回调。
当然，您可以分叉代码并取消限制。我建议如果您要这样做，请以类似于 _introlCompleteCallback 的方式创建一个 _introSkipCallback 并调用它，除非在最后一步您可能会调用这两个函数（如果存在）。
希望这会有所帮助。
【讨论】：
点击“完成”后的功能使用oncomplete
点击“跳过”后的功能使用onexit
奖励函数：onchange 将记录每个步骤，这可用于在特定步骤上调用函数
document.getElementById('startButton').onclick = function() {
// log each step
introJs().onchange(function(targetElement) {
console.log(this._currentStep)
if (this._currentStep === 3){
stepThreeFunc()
}
}).start()
// clicking 'Done'
.oncomplete(function(){
someFunc()
})
// clicking 'Skip'
.onexit(function(){
someOtherFunc()
});
};
【讨论】：
我注意到当您单击完成按钮时会调用 onexit（跳过直到最后一步）。 onexit 似乎没有将此绑定到 introjs 对象，因此我能够解决在演练完成时调用 onexit 的问题，如下所示：
// during setup
introJs.oncomplete(handleOnComplete);
introJs.onexit(() => handleOnExit(introJs));
function handleOnComplete() {
console.log(this._currentStep); // this is bound to the introJs object
}
function handleOnExit(introJs) {
const currentStep = introJs._currentStep;
if (currentStep < introJs._options.steps.length) {
doSomethingOnSkip();
}
};
【讨论】：
我打算添加评论，但我的代表太低了。我不想回答，因为我还没有实际测试过这个，但是在 2.5.0 版本（也可能是以前的版本）中，有 onexit 函数，我认为它应该处理中断以及单击完成在末尾。你试过吗？
【讨论】：
if ($(".introjs-skipbutton").is(":visible")) {
$( document ).on('click', '.introjs-skipbutton', function(event) {
event.stopPropagation();
event.stopImmediatePropagation();
self.exitTourguide();
});
}
【讨论】：
var intro = introJs();
intro.setOptions( {
'nextLabel': 'Next >',
'prevLabel': '< Back',
'tooltipPosition': 'right',
steps: this.stepsData,
showBullets: false,
showButtons: true,
exitOnOverlayClick: false,
keyboardNavigation: true,
} );
希望它有助于处理跳过按钮操作。
var self = this; intro.start().onbeforechange( function() { /* skip action*/
if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) {
$( document ).on( 'click', '.introjs-skipbutton', function( event ) {
self.exitTourguide();
});
}
});
/完成点击操作/ intro.oncomplete( function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton', function( event ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });
【讨论】：