IntroJS 条件步骤答案

【问题标题】：IntroJS Conditional StepsIntroJS 条件步骤
【发布时间】：2016-11-04 14:47:20
【问题描述】：

我有一个表单，其中某些字段仅在选中复选框时才可见。我想引导用户使用 IntroJS 演示。

有没有一种方法可以向 Intro JS 添加条件步骤。

以下是如何定义步骤。只有检查特定复选框是否应显示步骤4。

intro.setOptions({
            steps: [
                {
                    intro: "Hi! Lets start personilizing your settings. Click 'Next' to begin."
                },
                {
                    element: document.querySelector('#step1'),
                    intro: "Enter the email address where you would like to receive alerts. (for multiple user semi colon ';' as separator)",
                },
                {
                    element: document.querySelectorAll('#step2')[0],
                    intro: "Select your time zone.",
                    position: 'left'
                },
                {
                    element: '#step3',
                    intro: 'Turn \"On\" to receive payment reminder alerts.',
                    position: 'left'
                },
                {
                    element: '#step4',
                    intro: 'Select a \"Fee Type\". (The setting defines the type of fee to be applied to past due accounts.)'
                }
            ]
        });

【问题讨论】：

Steps 接受 JSON 对象，因此您可以使用所需的步骤动态创建 JSON 对象并将其传递给步骤。当我在电脑前时会发布答案。

标签： javascript jquery html intro.js

【解决方案1】：

这是一个 JSfiddle 的链接：https://fiddle.jshell.net/rv85ntcv/6/

关键是只要隐藏元素就拼接steps数组。

var btn1=document.getElementById("step1");
var btn2=document.getElementById("start");
var div=document.getElementById("step2");

btn1.onclick=function(){
if (div.style.display !=="none") {
  div.style.display="none";
} else {
  div.style.display="block";
}
};
// this is the crucial part
btn2.onclick=function(){
	var steps=[
  {element:"#step1",intro:"A button", position:"right"},
 {element:"#step2",intro:"This goes away sometimes"}
  ];
  
  if (div.style.display==="none") {
  	steps.splice(1,1);
  }

  introJs().setOptions({
  steps:steps
  }).start();
  
}

<link href="https://raw.githubusercontent.com/usablica/intro.js/master/introjs.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/1.0.0/intro.min.js"></script>
<div id="step2">
Some text
</div>

<button id="step1" >
Press me to hide div
</button>

<button id="start" >
Press me to start intro
</button>

【讨论】：