我正在学习 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">×</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>
最佳答案
该 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;
关于javascript - 如何在 Introjs 旅游插件的两个 jQuery 函数之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47957400/