javascript - intro.js ステップ間の JavaScript 関数の起動

Question

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

いくつかのステップの間に JavaScript 関数を起動したいのですが、うまくいきません。アイデアは、さまざまなイントロを定義し、イントロ間で JavaScript 関数を起動することです。

それを行うためのよりクリーンな方法はありますか？

Answer 1

私が行ったように他の誰かがこれに出くわした場合に備えて、setOptions に渡すことができる「steps」配列は、Intro の実行時に「this._introItems」でアクセスできることがわかりました。

その後、「steps」配列で関数を定義し、Intro の組み込み関数を使用して適切な時間 (onchange など) に実行できます。

// https://introjs.com/docs/intro/options/
//https://introjs.com/example/programmatic/index.html
var options = {  
    steps: [{  
        element: '#myElement',
        intro: "This step has two functions",
        myBeforeChangeFunction: function() { 
            alert('this is a before change loaded function');
        },
        myChangeFunction: function() { 
            alert('this is a change loaded function');
        },
    },
    {
        element: '#mySecondElement',
        intro: "This has no functions, which is why we need to check for the existence of functions below",
      }]
    };

var intro = introJs();

// add the options object with the steps/functions above
intro.setOptions(options); 

//use the intro.js built in onbeforechange function
intro.onbeforechange(function(){ 
    // check to see if there is a function on this step
    if(this._introItems[this._currentStep].myBeforeChangeFunction){
            //if so, execute it.
            this._introItems[this._currentStep].myBeforeChangeFunction();
        }
    }).onchange(function() {  //intro.js built in onchange function
        if (this._introItems[this._currentStep].myChangeFunction){
            this._introItems[this._currentStep].myChangeFunction();
        }
    }).start();

これが誰かに役立つことを願っています！