intro.jsのステップ間でjavascript関数を実行する

Question

私はIntro.jsをガイドツアーに使用しています。

私はいくつかのステップの間でjavascriptの機能を起動したいと思いますが、私はそれを管理しません。 考え方は異なるイントロを定義し、イントロ間でjavascript関数を起動することです。

もっとクリーンな方法がありますか？

Answer 1

私はステップの変更にコールバックを設定することで、よりよい解決策を見つけたと思う：

introJs().onchange(function(targetElement) { 
console.log(targetElement.id); 
    switch (targetElement.id) 
     { 
     case "step1": 
      function1(); 
     break; 
     case "step2": 
      function2(); 
     break; 
     } 
}).start(); 

Answer 2

別の解決策は、それがより一般的な方法のステップイベントです変更することです：

//setup your guide object and steps, with the addition of 
 
//event attributes per step that match the guide objects 
 
//available callbacks (onchange, onbeforechange, etc.) 
 
var guide = introJS(); 
 
var options = { 
 
    steps:[ 
 
    { 
 
     element: '#step1', 
 
     intro: 'Your content...', 
 
     position: 'top', 
 
     onchange: function(){ 
 
     //do something interesting here... 
 
     }, 
 
     onbeforechange: function(){ 
 
     //do something else interesting here... 
 
     } 
 
    },{ 
 
     element: '#step2', 
 
     intro: 'Your content...', 
 
     position: 'top', 
 
     onchange: function(){ 
 
     //do something interesting here... 
 
     }, 
 
     onbeforechange: function(){ 
 
     //do something else interesting here... 
 
     } 
 
    } 
 
    ] 
 
}; 
 

 
createStepEvents: function(guideObject, eventList){ 
 

 
    //underscore loop used here, foreach would work just as well 
 
    _.each(eventList, function(event){ 
 

 
    //for the guid object's <event> attribute... 
 
    guideObject[event](function(){ 
 

 
     //get its steps and current step value 
 
     var steps  = this._options.steps, 
 
      currentStep = this._currentStep; 
 

 
     //if it's a function, execute the specified <event> type 
 
     if(_.isFunction(steps[currentStep][event])){ 
 
     steps[currentStep][event](); 
 
     } 
 
    }); 
 

 
    }, this); 
 
} 
 

 
//setup the events per step you care about for this guide 
 
createStepEvents(guide, ['onchange','onbeforechange']);

このようにして、発生するイベントを指定することができますイベントとそれに関連するイベントを切断するのではなく、ステップのオブジェクトを削除します。

Answer 3

this._currentStepが優れています。

introJs().onchange(function(targetElement) { 
console.log(this._currentStep); 
}).start(); 

Answer 4

Javascriptを：

var options_before = { 
     steps: [ 
      { 
       element: '#step1', 
       intro: 'Step One' 
      }, 
      { 
       element: '#step2', 
       intro: "Step Two" 
      }, 
      { 
       element: '#step3', 
       intro: "Final Step" 
      } 
     ] 
    }; 

    function startObjectsIntro() { 
     var intro = introJs(); 
     intro.setOptions(options_before); 
     intro.start().onbeforechange(function() { 

      if (intro._currentStep == "2") { 
       alert("This is step 2") 
      } 
     }); 
    } 

HTML：

<div id="step1"> 
Step 1 
</div> 
<div id="step2"> 
Step 2 
</div> 
<div id="step3"> 
Step 3 
</div> 
<hr /> 
<a onclick="startObjectsIntro();">Start intro</a> 

https://jsfiddle.net/jmfr8nyj/8/