javascript - 如何在Introjs游览插件的两个jQuery函数之间切换

我正在学习jQuery和JS，因此，如果这是一个愚蠢的简单问题，我深表歉意。

我正在使用一个名为intro.js的游览插件，该插件可向网页（引导页面）添加提示。我已经启用了intro.js提示，但是我需要能够通过切换一个按钮来显示和隐藏所有提示。插件当前的工作方式是，通过单击按钮显示提示，然后必须手动单击每个提示图标以查看工具提示，然后单击工具提示上的按钮以隐藏提示图标。网页上可能会显示几个提示（从10到15），用户可能不想查看所有提示，因为他们可能只想查看1或2然后关闭所有提示-所以我想成为能够通过一个按钮打开/关闭所有按钮。

根据插件API（在此处查看：https://introjs.com/docs/hints/api/），使用以下函数（单击introJs.addHints（））单击按钮时会添加提示。您应该可以使用以下功能隐藏所有提示：introJs.hideHints（）。

那么，如何用一个按钮切换这两个功能？

另外，我遇到的另一个问题是，如果用户没有关闭所有提示图标，而是他们打开一个新页面，则提示图标仍然可见。如果我刷新页面，它们会消失。与此相关的是，如果有人打开并关闭了提示，但决定再次重新打开提示，则除非刷新页面，否则它们不会打开。 API文档具有一个名为introJs.refresh（）的函数，该函数刷新并重新排列提示。我认为这是我需要清除的现有提示（但是我可能是错的）。关闭提示时，如何清除/刷新提示，以便用户可以根据需要重新打开提示，而无需刷新-因此，如果打开新页面并且未关闭某些提示，则提示会消失。

请帮助我解决这些问题，并使新手的圣诞节/假期变得更好！！！

这是一个jsfiddle，带有添加到引导模式的提示。我需要打开/关闭“显示提示”链接：http://jsfiddle.net/beaver71/fc0rkakn/

谢谢大家阅读-祝大家节日快乐。

HTML示例：

<!-- Button trigger modal -->
<a href="#notesModal" data-toggle="modal" role="dialog" id="btnOpenModal" class="btn btn-primary">Open Notes Modal</a>

<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Notes</h4>
      </div>
      <div class="modal-body">
          <div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
               <input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
          </div>
      </div>
      <div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="middle-right" style="margin-left:15px;">0/300
      </div>
      <div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i>&nbsp;Show Hints</a></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

最佳答案

该API允许命令introJ并将回调附加到各种内部事件，但是该API不提供状态检查（尤其是当前是否显示提示）。

要实现切换功能，您将需要管理自己的状态变量。

像这样的东西...

jQuery(function($) {
    var hintShowing = false; // a variable by which to track the state of introJs.

    introJs("#targetElment");

    $("#myToggleButton").on('click', function() {
        if(hintShowing) {
            introJs.hideHints();
            hintShowing = false;
        } else {
            introJs.showHints();
            hintShowing = true;
        }
    });

    function setShowing() {
        hintShowing = true;
    }
    function resetShowing() {
        hintShowing = false;
    }

    introJs.onchange(setShowing).oncomplete(resetShowing).onexit(resetShowing);

    // add hints and set options here
});

这应该至少在一定程度上起作用。这取决于显示初始提示时onchange是否触发。否则，还需要手动调用setShowing()（在提示序列开始时从您自己的代码中调用），或者仅初始化var hintShowing = true;

关于javascript - 如何在Introjs游览插件的两个jQuery函数之间切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47957400/