Intro.js无法在两步之间触发功能(请检查我的代码) [英] Intro.js not able to fire function between two steps(please check my code)

问题描述

我绝对是JS的初学者，请检查我的代码，我无法在intro.js的两步之间调用函数.现在，我只是想显示警报但失败了.

I am absolute begginer with JS, Please check my code, I am not able to call a function between two steps of intro.js. For now I am just trying to show alert but failed.

<script type="text/javascript">
var introguide = introJs();
$(function(){



introguide.setOptions({
steps: [
{
  element: '#chaman',
  intro: 'This is step1',
  position: 'top',
  onchange: function(){
    //do something interesting here...

    alert("Want to call function after this step , no alert showing ");
  },
  onbeforechange: function(){

  }
},
{
  element: '#search',
  intro: 'This is step 2.',
  position: 'bottom',
  onchange: function(){
    //do something interesting here...


  },
  onbeforechange: function(){

  }

}
,
{
  element: '.flyMarker',
  intro: 'This is step 3.',
  position: 'bottom',
  onchange: function(){
    //do something interesting here...
  },
  onbeforechange: function(){
    //do something else interesting here...
  }
}
]
});



setTimeout(function() { introguide.start(); }, 3000);


});


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( introguide, ['onchange','onbeforechange']);



</script>

我想在每个步骤后触发一些功能.

I want to fire some function after each step.

推荐答案

不要忘记添加 underscore.js .

您的代码中的错误是:

createStepEvents: function( guideObject, eventList ){

更改为:

function createStepEvents(guideObject, eventList) {

var introguide = introJs();
$(function() {

  introguide.setOptions({
    steps: [{
        element: '#chaman',
        intro: 'This is step1',
        position: 'top',
        onchange: function() {
          alert("Do whatever you want on this callback.");
        },
        onbeforechange: function() {
        }
      },
      {
        element: '#search',
        intro: 'This is step 2.',
        position: 'bottom',
        onchange: function() {
        },
        onbeforechange: function() {
        }
      },
      {
        element: '.flyMarker',
        intro: 'This is step 3.',
        position: 'bottom',
        onchange: function() {
        },
        onbeforechange: function() {
        }
      }
    ]
  });

  setTimeout(function() {
    introguide.start();
  }, 3000);

});

function createStepEvents(guideObject, eventList) {

  //underscore loop used here.
  _.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(introguide, ['onchange', 'onbeforechange']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.4.0/intro.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>

这篇关于Intro.js无法在两步之间触发功能(请检查我的代码)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！