intro.js顯示和隱藏數據提示

我想要一個按鈕，可以打開和關閉intro.js中的'提示'功能。intro.js顯示和隱藏數據提示

我有一個工作版本來顯示，然後隱藏，但該節目只能工作一次。我如何才能重複使用它？此功能適用於標準數據介紹，但不適用於數據提示。

<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'); 
     } 
    }); 
});

來源

2017-02-04 neil

或許有點哈克，但這對我的作品......

首先，把你的提示到自己的變量：

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

然後，重置您的提示中介紹的選項

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

隱藏的提示被賦予一類introjs-hidehint，並且document.querySelectorAll將返回所有這些都在一個數組中。一旦該數組與您的提示數組大小相同，請重置您的介紹選項中的提示，這會重置所有提示，以便再次顯示它們。

來源

2017-08-24 00:34:36

而不是使用hideHints intro.js API方法只是從DOM刪除intro.js的DIV塊：

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

（你可以使用jQuery同樣的事情，如果你願意的話）。

當div從DOM中刪除時，只需再次初始化提示，就像您使用addHints方法時想要顯示提示一樣，它會起作用。

來源

2018-01-29 08:37:48 senya

intro.js顯示和隱藏數據提示

回答

相關問題