javascript - 在 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/

Answer 5

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

您可以在“步骤”数组中定义函数，然后使用 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();

我希望这对某人有帮助！