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

Question

我正在学习 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>

Answer 1

该 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;