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显示和隐藏数据提示

回答

相关问题