Функция firing javascript между шагами intro.js

Я использую Intro.js для экскурсий.

Я хотел бы запускать javascript-функции между некоторыми шагами, но мне это не удается. Идея заключалась бы в том, чтобы определить разные входы и запустить javascript-функции между входом.

Есть ли более чистый способ сделать это?

Ответ 1

Думаю, я нашел лучшее решение, установив обратный вызов при изменении шага:

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

Ответ 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 <event> attribute...
    guideObject[event]( function(){

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

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

Ответ 3

this._currentStep лучше.

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

Ответ 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/