在 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 的“steps”数组。

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

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