如何为特定步骤禁用或隐藏 intro.js 中的按钮？答案

【问题标题】：How to disable or hide a button in intro.js for a specific step?如何为特定步骤禁用或隐藏 intro.js 中的按钮？
【发布时间】：2020-04-20 19:54:27
【问题描述】：

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

我的代码是这样的

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            
      }
  ],    
})

【问题讨论】：

你有办法解决这个问题吗？我正在寻找与您相同的答案。

标签： javascript jquery node.js intro.js

【解决方案1】：

我认为这是不可能的。你为什么要隐藏下一个按钮呢？但是，您可以使用hideNext 隐藏最后一个提示上的下一个按钮，或使用showButtons 隐藏所有导航按钮。阅读Intro.js docs for available options。

【讨论】：

好的，我明白了，但我想知道他们是否有任何可能的方式在某些特定步骤中禁用“下一个”或“上一个”按钮。我的目标是将客户带到同一页面中的不同选项卡，但不需要去在某些坚持下后退或前进。

【解决方案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)">

【讨论】：