intro.js Datenhinweis ein- und ausblenden

Question

Ich möchte eine Schaltfläche haben, die die 'Hints' Funktion in intro.js ein- und ausschalten kann.

Ich habe eine funktionierende Version zu zeigen und dann ausblenden, aber die Show funktioniert nur einmal. Wie kann ich es immer wieder zum Laufen bringen? Diese Funktionalität funktioniert für das Standard-Daten-Intro, nicht jedoch für den Daten-Hinweis.

<div class="jumbotron"> 
    <h1 id='step1'>Hints</h1> 
    <p class="lead">Adding hints using JSON + callbacks</p> 
    <a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a> 
</div> 

function addHints(){ 
    intro = introJs(); 
     intro.setOptions({ 
     hints: [ 
      { 
      element: document.querySelector('#step1'), 
      hint: "This is a tooltip.", 
      hintPosition: 'top-middle' 
      }, 
      { 
      element: '#step2', 
      hint: 'More features, more fun.', 
      position: 'left' 
      }, 
      { 
      element: '#step4', 
      hint: "<b>Another</b> step.", 
      hintPosition: 'top-middle' 
      } 
     ] 
     }); 
     intro.onhintsadded(function() { 
      console.log('all hints added'); 
     }); 
     intro.onhintclick(function(hintElement, item, stepId) { 
      console.log('hint clicked', hintElement, item, stepId); 
     }); 
     intro.onhintclose(function (stepId) { 
      console.log('hint closed', stepId); 
     }); 
     intro.addHints(); 
    } 
$(function() { 
    $('#step2').click(function(){ 
     if ($('#step2').hasClass('clicked')) { 
      introJs().hideHints(); 
      $('#step2').removeClass('clicked'); 
     } else { 
      addHints(); 
      $('#step2').addClass('clicked'); 
     } 
    }); 
}); 

Answer 1

Vielleicht ein bisschen hacky, aber das funktioniert für mich ...

Zuerst legen Sie Ihre Hinweise in ihre eigene Variable:

hints = [{...}, ...] 

dann, Ihre Hinweise in den Intro-Optionen zurücksetzen

intro.onhintclose(function(stepId) { 
    if (document.querySelectorAll('.introjs-hidehint').length === hints.length) { 
    intro.setOptions({hints: hints}) 
    } 
}) 

die versteckten Hinweise sind eine Klasse von introjs-hidehint gegeben, und document.querySelectorAll zurückkehren alle in einem Array. Sobald dieses Array die gleiche Größe wie dein Tipp-Array hat, setze deine Hinweise in deinen Intro-Optionen zurück und das setzt alle deine Hinweise zurück, sodass du sie alle wieder anzeigen kannst.

Answer 2

Statt hideHints intro.js API-Methode entfernen Sie einfach das div Block intro.js von DOM verwenden:

var introDiv = document.getElementsByClassName("introjs-hints")[0]; 
introDiv.parentNode.removeChild(introDiv); 

(Sie können mit jQuery das gleiche tun, wenn Sie wollen).

Wenn das div aus DOM entfernt wird, initialisieren Sie einfach noch einmal Hinweise wie bei Ihrer Methode addHints, wenn Sie Hinweise anzeigen möchten und es funktioniert.