Javascript 如何在Introjs tour插件的两个jQuery函数之间切换

我正在学习jQuery和JS，如果这是一个愚蠢、简单的问题，我很抱歉

我正在使用一个名为intro.js的tour插件，它向网页（引导页面）添加提示。我得到了intro.js提示，但是我需要能够通过切换一个按钮来显示和隐藏所有提示。插件当前的工作方式是，单击按钮显示提示，然后手动单击每个提示图标以查看工具提示，然后单击工具提示上的按钮以隐藏提示图标。网页可能会显示多个提示（10-15之间的任意位置），用户可能不想看到所有提示是什么，因为他们可能只想看到1或2是什么，然后关闭所有提示-因此我希望能够用一个按钮打开/关闭所有提示

根据插件API（在此处查看：），当使用以下函数单击按钮时会添加提示：introJs.addHints（）。您应该能够使用以下函数隐藏所有提示：introJs.hideHints（）

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

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

请帮我回答这些问题，让新手的圣诞节/假期变得更好

下面是一个JSFIDLE，其中包含添加到引导模式的提示。我需要打开/关闭“显示提示”链接：

感谢大家的阅读，祝大家节日快乐

示例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>

&时代；
笔记
添加
0/300
接近
保存更改

API允许命令introJs并将回调附加到各种内部事件，但是它不提供状态检查（特别是当前是否显示提示）

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

像这样的

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
谢谢Roamer的回复。我尝试应用您的代码，但始终出现语法错误（缺少；before语句）。我添加了一个指向一个JSFIDLE的链接，该JSFIDLE用于向引导模式添加提示。您能告诉我如何在JSFIDLE上使用这个工具吗？首先，跟踪语法错误。消息应包括行号。这很简单。我现在正在打电话，所以不能做太多。漫游者，问题-什么是简介（“targetElement”）；对于这应该是我应用提示的元素（id或类）吗？如果是，将有几个不同的元素带有提示。@Rex，我从来没有实际使用过
introJS
，只研究过文档。据我所知，您的HTML必须包含属性形式的指令，如
data intro
和
data step:
，然后所有内容都用javascript初始化，并使用一般形式的表达式
introJs（）
或
introJs（选择器）。你可能比我更了解这方面，所以如果我弄错了，请不要理我。