我正在使用 jQuery Tourbus引导用户浏览我的网站。我希望它在有人第一次访问时加载窗口时显示,但之后它不应加载,除非用户单击信息图标。
为了确保它仅在用户第一次访问时自动加载,我这样做了 -
<?php
if($tourbus_verify==0) {
?>
<script type="text/javascript">
$(window).load( function() {
var tour = $('#my-tour-id').tourbus( {} );
tour.trigger('depart.tourbus');
} );
</script>
<?php
}
?>
加载页面后,我有一个方法将值 1
输入数据库。因此,如果用户是第一次访问,$tourbus_verify
将为 0
,因此在页面加载时会加载导览。如果用户之前已经访问过该页面,$tourbus_verify
将为 1
,因此它不会自动加载。
它加载的游览如下-
<ol class='tourbus-legs' id='my-tour-id'>
<li data-orientation='centered' data-width='400'>
<p>Hello</p>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#stuff' data-orientation='top' data-width='400'>
<p>That's awesome</p>
<a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
<p>Bye</p>
<a href='javascript:void(0);' class='tourbus-stop'>End!</a>
</li>
</ol>
目前一切正常。现在,我有一个图标,点击它可以加载游览 -
<div class="row-fluid">
<span style="cursor: pointer;" id="tourbus-restart">
<i class="fa fa-info" aria-hidden="true"></i>
</span>
</div>
在页面的末尾,我有 -
<script type="text/javascript">
$("#tourbus-restart").click(function(){
var tourclick = $('#my-tour-id1').tourbus( {} );
tourclick.trigger('depart.tourbus');
});
</script>
这会加载与之前相同的游览,但 ID 不同 -
<ol class='tourbus-legs' id='my-tour-id1'>
<li data-orientation='centered' data-width='400'>
<p>Hello</p>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#stuff' data-orientation='top' data-width='400'>
<p>That's awesome</p>
<a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
<p>Bye</p>
<a href='javascript:void(0);' class='tourbus-stop'>End!</a>
</li>
</ol>
出于某种原因,这一次运行良好,但第二次触发了额外的游览实例,所以我最终同时运行两个游览,如下图所示 -
因此,我必须单击每个 Next
两次才能完成导览。有谁知道这可能是什么原因造成的?谢谢!
最佳答案
我是这样看的:
$(selector).tourbus()
行用于初始化插件并将一些功能绑定(bind)到元素selector
。当您将它放在 click
事件处理程序中时,您仅在单击时才初始化该元素。所以,如果你点击两次,那么你就是在初始化两次。我只能假设点击三次会在元素上初始化插件三次;等等。当您再次初始化时,先前的实例仍然附加在该元素上。
因此,通过将此行放在 click
事件处理程序之外,您可以确保插件仅初始化一次。
关于javascript - 如何阻止 jQuery TourBus 在点击时创建两个实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38001228/