如何禁用或隐藏特定步骤的介绍.js中的按钮?

Question

目前，当我尝试在特定步骤中禁用按钮时，我遇到了一个问题？

我的代码是这样的

var intro = introJs();
intro.setOptions({
steps: [
{
element: "#add_temp",
intro: "Add your template"
},            
{
element: "#addButton",
intro: "Please click on add button ",
position:'left',  
hideNext: true            
}
],    
})

Answer 1

我相信这是不可能的。你为什么要隐藏下一个按钮？但是，您可以使用hideNext隐藏最后一个提示上的"下一步"按钮，或使用showButtons隐藏所有导航按钮。阅读简介.js文档以了解可用选项。

Answer 2

如果存在运行类型的验证检查，则上述方法将不起作用。例如，如果该元素是复选框或输入字段，并且在用户选择或填充它之前，不会激活下一个按钮。在这种情况下，我们必须遵循以下过程。

.ts 文件

this.introJS.onafterchange(() => {
var original_onclick = $('.introjs-nextbutton').get(0).onclick;
// == taxId field checking ===
if (this.introJS._currentStep === 1) {
if (this.addEntityForm.controls.taxId.value !== '') {
$('.introjs-nextbutton').removeClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = original_onclick;
} else {
$('.introjs-nextbutton').addClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = null;
}
}
}

addTaxId(value: string): void {
if (value !== '') {
$('.introjs-nextbutton').removeClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = original_onclick;
} else {
$('.introjs-nextbutton').addClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = null;
}
}

.HTML：

<input formControlName="taxId" type="text" class="form-border-bottom" #taxId (keyup)="addTaxId(taxId.value)">

Answer 3

const onBeforeChange = (x) => {
if (x === 'on step you want to hide') var y = enter code heredocument.getElementsByClassName('introjs-nextbutton')[0];
if (y) y.style.display = 'none';
}

其中onBeforeChange是intro.js-react中的步骤中的预定义函数。