javascript - IntroJS 条件步骤

Question

我有一个表单，其中某些字段仅在选中复选框时才可见。我想引导用户使用 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.)'
                }
            ]
        });

Answer 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>