如何在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，在bootstrap模式中添加了提示。Show Hints链接是我需要打开/关闭的地方：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">×</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> 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>回答 1
Stack Overflow用户
发布于 2017-12-24 10:59:43
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;
https://stackoverflow.com/questions/47957400
复制相似问题
腾讯云开发者
