我创建了一个入职演练，用于加载A / B测试软件的SaaS应用程序 . 巡视将自动从初始页面加载开始 . 用户可以随时关闭游览 . 我已经使用了localStorage，因此浏览器将在用户退出页面的时间点回想起该巡回演出将在巡演的另一点再次开始 . 我还有一个“重播”按钮，在巡视运行时被禁用，并在巡视结束或关闭时启用 . 重播按钮的选择器是“.tstour-replay” . 我通过添加一个使用CSS3 @keyframes规则的类，然后延迟删除类，以便在用户返回并再次使用下一个动画时动画将重复播放游戏步骤的动画 . 这些被称为“popover-ani1”，“popover-ani2”等 .
我遇到的问题并非一直发生，所以我找不到解释其原因的模式 . 有时，代码中称为＃popoverid1，＃popoverid2等的单个巡回模式的Next和Back按钮将被禁用，或者＃popoverback1，＃popoverback2等等 . 他们没有响应点击，他们都有CSS悬停效果，无法正常工作 . 但是，关闭按钮.popover-close始终有效 . 我无法弄清楚为什么有时候Next和Back按钮完全无法点击并失去交互性，而Close按钮总是很好 .
我是JavaScript和jQuery的新手 . 这是我的JavaScript代码：
function tourFunction() {
$(".tstour-replay").addClass("tstour-replay-disable");
$("#tstour-start").click(function(){
//if clicked, do nothing
});
$("#popoverid1").click(function() {
$(".popover1").addClass("popover1-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover1").removeClass("popover1-ani");
}, 250);
});
$("#popoverid2").click(function() {
$(".popover2").fadeOut(50);
$(".popover3").delay(50).fadeIn(50);
});
$("#popoverback2").click(function() {
$(".popover2").addClass("popoverback2-ani").delay(200).fadeOut(50);
$(".popover1").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover2").removeClass("popoverback2-ani");
}, 250);
});
$("#popoverid3").click(function() {
$(".popover3").addClass("popover3-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popover3-ani");
}, 250);
});
$("#popoverback3").click(function() {
$(".popover3").addClass("popoverback3-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popoverback3-ani");
}, 250);
});
$("#popoverid4").click(function() {
$(".popover4").addClass("popover4-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popover4-ani");
}, 250);
});
$("#popoverback4").click(function() {
$(".popover4").addClass("popoverback4-ani").delay(200).fadeOut(50);
$(".popover3").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popoverback4-ani");
}, 250);
});
$("#popoverid5").click(function() {
$(".popover5").addClass("popover5-ani").delay(200).fadeOut(50);
$(".popover6").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popover5-ani");
}, 250);
});
$("#popoverback5").click(function() {
$(".popover5").addClass("popoverback5-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popoverback5-ani");
}, 250);
});
$("#popoverid6").click(function() {
$(".popover6").addClass("popover6-ani").delay(200).fadeOut(50);
$(".popover7").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popover6-ani");
}, 250);
});
$("#popoverback6").click(function() {
$(".popover6").addClass("popoverback6-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popoverback6-ani");
}, 250);
});
}
function tourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
$(".tstour-replay").addClass("tstour-replay-disable");
$(".popover1").fadeIn("fast");
});
}
function disableTourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
}
//END FUNCTIONS
$(".popover-btn-start").click(function() {
$(".tour-container").fadeOut();
$(".popover7").fadeOut();
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
tourReplay();
});
$(".popover-close").click(function(){
$(".tour-container").fadeOut();
$(".popover").fadeOut();
tourReplay();
});
//BEGIN FUNCTION TRIGGERS
var trigger_flag = localStorage.getItem('tstour');
if (!trigger_flag) {
disableTourReplay();
$(".popover1").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '1') { //clicked next1
disableTourReplay();
$(".popover2").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '2') { //clicked next2
disableTourReplay();
$(".popover3").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '3') { //clicked next3
disableTourReplay();
$(".popover4").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '4') { //clicked next4
disableTourReplay();
$(".popover5").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '5') { //clicked next5
disableTourReplay();
$(".popover6").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '6' || '7') { //got to last popover, finished tour or closed out
tourReplay();
}
//END FUNCTION TRIGGERS
//BEGIN LOCAL STORAGE SET
$(document).on("click", "#popoverid1", function(e){
localStorage.setItem('tstour', '1');
});
$(document).on("click", "#popoverid2", function(e){
localStorage.setItem('tstour', '2');
});
$(document).on("click", "#popoverid3", function(e){
localStorage.setItem('tstour', '3');
});
$(document).on("click", "#popoverid4", function(e){
localStorage.setItem('tstour', '4');
});
$(document).on("click", "#popoverid5", function(e){
localStorage.setItem('tstour', '5');
});
$(document).on("click", "#popoverid6", function(e){
localStorage.setItem('tstour', '6');
});
$(document).on("click", ".popover-btn-start", function(e){
localStorage.setItem('tstour', '7');
});
$(document).on("click", ".popover-close", function(e){
localStorage.setItem('tstour', '7');
});
这是HTML
<div class="tour-centered">
<div id="tstour-start" class="tstour-replay">How Does This Work?</div>
<div class="popover popover1">
<div class="popover-right">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Employees On Your Calendar</div>
<div class="popover-body">Here's Jane Deaux, a sample employee. I preloaded some events for her in your calendar.</div>
<div class="popover-footer">
<div class="popover-progress">1 of 6</div>
<div class="popover-buttons">
<div class="popover-next" id="popoverid1">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover2">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Calendar Events</div>
<div class="popover-body">Notice Jane's name on the calendar. Each listing is a scheduled or pending calendar event.
Hover your mouse over her name to quickly see the event details.</div>
<div class="popover-footer">
<div class="popover-progress">2 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback2">Back</div>
<div class="popover-next" id="popoverid2">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover3">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add a New Calendar Event</div>
<div class="popover-body">Double-click on any day to create a new calendar event. Use Jane to try it out and deduct hours from her time-off banks.
Give it a try. I'll wait right here until you're done.
</div>
<div class="popover-footer">
<div class="popover-progress">3 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback3">Back</div>
<div class="popover-next" id="popoverid3">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover4">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Create More Calendar Events</div>
<div class="popover-body">Great job! You can also click this icon to create more calendar events.</div>
<div class="popover-footer">
<div class="popover-progress">4 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback4">Back</div>
<div class="popover-next" id="popoverid4">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover5">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Customize Your Calendar</div>
<div class="popover-body">Visit Preferences to customize your calendar event codes, create time-off plans, and much more.</div>
<div class="popover-footer">
<div class="popover-progress">5 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback5">Back</div>
<div class="popover-next" id="popoverid5">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover6">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add More Employees</div>
<div class="popover-body">When you're ready, add more of your employees and create calendar events for them.
The more employees you load and track, the easier it is to avoid scheduling conflicts.</div>
<div class="popover-footer">
<div class="popover-progress">6 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback6">Back</div>
<div class="popover-next" id="popoverid6">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover7">
<div class="popover-content-final">
<div class="popover-title-final">Ready to Take Back Your Time?</div>
<div class="popover-btn-start">Start Tracking!</div>
<div class="popover-help">
<a href="https://tracksmart.zendesk.com/hc/en-us/requests/new" target="_blank">
I Need Some Help
</a></div>
</div>
</div>
</div>