Question

我想要一个可以打开和关闭intro.js中'hints'功能的按钮。

我有一个可以显示然后隐藏的工作版本，但该节目仅适用一次。我怎样才能让它重复工作？此功能适用于标准数据介绍，但不适用于数据提示。

setGlobalValues

Answer 1

而不是使用hideHints intro.js API方法，只需从DOM中删除intro.js的div块：

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

（如果你愿意的话，你可以用jQuery做同样的事情。）

当从DOM中删除div时，只需再次初始化提示，就像使用addHints方法一样，当您想显示提示并且它可以正常工作时。

Answer 2

也许有点hacky，但这对我有用......

首先，将你的提示放入他们自己的变量中：

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

然后，在介绍选项中重置提示

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

隐藏提示被赋予一类introjs-hidehint，而document.querySelectorAll将返回数组中的所有提示。一旦该数组与您的提示数组大小相同，请在您的简介选项中重置提示，这将重置所有提示，以便您可以再次显示它们。

Answer 3

这是一个更完整的示例，该示例还允许：

（a）通过单击一个按钮（位于导航栏上，因此可在多个页面上使用）来切换提示的开/关。

（b）一旦所有提示都被单击，提示div将被删除，因此单击“显示提示”按钮实际上将再次...显示提示...

（c）允许您将多个页面的提示存储在单个json对象数组中（re：导航栏）。

var jquery = require('jquery');
var introJs = require('intro.js');

* ===========================================================================
*       define onclick of hints button
* =========================================================================*/
jquery('#hints_button').on('click', function() {
    if (document.getElementsByClassName('introjs-hints').length == 0){
        addSomeHints();
    }
    else {
        destroyHints();
    };
});

/* ===========================================================================
 *      Add hints using the IntroJS library
 * =========================================================================*/

/* define hints */
var theHints = [
{
        element: document.querySelector('#step1'),
        hint: "This is a tooltip.",
        hintPosition: 'top-middle'
      },
      {
        element: '#step2',
        hint: 'More features, more fun.',
        hintPosition: 'left'
      },
      {
        element: '#step4',
        hint: "<b>Another</b> step.",
        hintPosition: 'top-middle'
      }
];

/* generate hints with introjs */
function addSomeHints() {
    intro = introJs();

    intro.setOptions({
        hints: theHints
    });

    intro.onhintclose(function (stepId) {
        var remaining_hints = all_hints - document.getElementsByClassName("introjs-hidehint").length;
        if (remaining_hints == 0) {
            destroyHints();
        };
    });

    /* add hints */
    intro.addHints();

    /* store number of hints created */
    var all_hints = document.getElementsByClassName('introjs-hint').length;

};

/* remove hints div */
function destroyHints() {
    var hintsDiv = document.getElementsByClassName("introjs-hints")[0]
    hintsDiv.parentNode.removeChild(hintsDiv);
};

...希望这可以节省某人20分钟的时间，而我花了我20分钟的时间来整理答案，并使其适应于看起来非常普通的用例。

intro.js显示和隐藏数据提示

3 个答案: