Chức năng javascript kích hoạt giữa các bước intro.js

Question

Tôi đang sử dụng Intro.js cho chuyến tham quan có hướng dẫn.

Tôi muốn kích hoạt chức năng javascript giữa một số bước nhưng tôi không quản lý. Một ý tưởng sẽ là xác định các phần giới thiệu khác nhau và kích hoạt các hàm javascript giữa các phần giới thiệu.

Có cách nào hiệu quả hơn không?

Answer 1

Tôi nghĩ rằng tôi tìm thấy một giải pháp tốt hơn, bằng cách thiết lập một cuộc gọi lại vào những thay đổi bước:

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

Answer 2

Một giải pháp khác sẽ được thay đổi đó là sự kiện bước theo một cách chung chung hơn:

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

Bằng cách này bạn có thể chỉ định sự kiện nào xảy ra trên desc đối tượng ription của bước, thay vì ngắt kết nối các sự kiện và các sự kiện liên quan của chúng.

Answer 3

this._currentStep là tốt hơn.

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/