在 intro.js 步骤之间触发 javascript 函数

Firing javascript function between intro.js steps

提问by FredB

I am using Intro.jsfor a guided tour.

我正在使用Intro.js进行导览。

I would like to fire javascript functions between some of the steps but I don't manage to. An idea would be to define different intros, and fire the javascript functions between the intros.

我想在某些步骤之间触发 javascript 函数，但我没能做到。一个想法是定义不同的介绍，并在介绍之间触发 javascript 函数。

Is there a cleaner way to do it ?

有没有更干净的方法来做到这一点？

回答by FredB

I think I found a better solution, by setting a callback on step changes :

我想我找到了一个更好的解决方案，通过在步骤更改时设置回调：

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

回答by MKircher

Another solution would be to alter it's step events in a more generic way:

另一种解决方案是以更通用的方式改变它的步骤事件：

//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']);

This way you can specify which events happen on the description object of the step, rather than disconnecting events and their associated events.

通过这种方式，您可以指定在步骤的描述对象上发生哪些事件，而不是断开事件及其关联事件。

回答by dasmod

this._currentStep is better.

this._currentStep 更好。

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

回答by Sergey

Javascript:

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:

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/

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

回答by user12313260

Just in case anyone else stumbles across this as I did, I found that the 'steps' array you can pass to setOptions can be accessed in "this._introItems" when Intro is executing.

以防万一其他人像我一样偶然发现了这一点，我发现可以在 Intro 执行时在“this._introItems”中访问您可以传递给 setOptions 的“steps”数组。

You can define functions then in the 'steps' array and then execute them at the appropriate time (onchange, etc.) using Intro's built in functions.

您可以在 '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();

I hope this helps somebody!

我希望这对某人有所帮助！