IntroJSの条件ステップ

Question

私は、チェックボックスをオンにしたときにのみ、一部のフィールドが表示されるようなフォームを持っています。私はIntroJSデモを使ってユーザーを歩きたい。

イントロ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/

キーは、要素が隠されている時はいつでもあなたが手順の配列をスプライスということです。

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(){ 
 
\t var steps=[ 
 
    {element:"#step1",intro:"A button", position:"right"}, 
 
{element:"#step2",intro:"This goes away sometimes"} 
 
    ]; 
 
    
 
    if (div.style.display==="none") { 
 
    \t 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>