javascript - Intro.js 无法在两个步骤之间触发函数(请检查我的代码)

Question

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

<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>

我想在每一步之后触发一些函数。

Answer 1

别忘了添加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>