javascript - 如何阻止 jQuery TourBus 在点击时创建两个实例?

标签 javascript php jquery html css

我正在使用 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>

出于某种原因,这一次运行良好,但第二次触发了额外的游览实例,所以我最终同时运行两个游览,如下图所示 -

enter image description here

因此,我必须单击每个 Next 两次才能完成导览。有谁知道这可能是什么原因造成的?谢谢!

最佳答案

我是这样看的:

$(selector).tourbus() 行用于初始化插件并将一些功能绑定(bind)到元素selector。当您将它放在 click 事件处理程序中时,您仅在单击时才初始化该元素。所以,如果你点击两次,那么你就是在初始化两次。我只能假设点击三次会在元素上初始化插件三次;等等。当您再次初始化时,先前的实例仍然附加在该元素上。

因此,通过将此行放在 click 事件处理程序之外,您可以确保插件仅初始化一次。

关于javascript - 如何阻止 jQuery TourBus 在点击时创建两个实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38001228/

相关文章:

javascript - 如何在 python 中使用 selenium 驱动程序单击链接而不知道 anchor 标记内的文本

Php MySQL 更新表 textarea html

php - 如何在传递 $_FILES 时重定向到另一个 php 文件?

javascript - 使用 jquery 选择元素

javascript - FlowType - 复杂对象的重复声明

javascript - 调试azure sdk(如何显示相关的REST API)

javascript - 如何使用 jQuery 更改插入 HTML 文档中的 JavaScript 变量值

javascript - Greasemonkey setTimeout 和 setInterval 不触发

javascript - 在 React.js 中自动刷新页面

php - Codeigniter Cart - 在数据库中保存数据 - 如何处理?