我有一个表单,其中某些字段仅在选中复选框时才可见。我想引导用户使用 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.)'
}
]
});
最佳答案
这里是 JSfiddle 的链接:https://fiddle.jshell.net/rv85ntcv/6/
关键是每当元素隐藏时就拼接步骤数组。
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>
关于javascript - IntroJS 条件步骤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38158124/