如何阻止jQuery TourBus在单击时创建两个实例? [英] How do I stop jQuery TourBus from creating two instances on click?

问题描述

我正在使用 jQuery Tourbus 来引导用户浏览我的网站.我希望它在有人第一次访问时在加载窗口时显示，但是此后除非用户单击信息图标，否则它不应加载.

I'm using jQuery Tourbus to guide a user through my website. I want it to show up on loading the window the first time someone visits but after that it shouldn't load unless the user clicks on the information icon.

为确保仅在用户第一次访问时自动加载，我这样做-

To make sure it auto loads only when the user vists the first time, I did this -

<?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，因此不会自动加载.

Upon loading the page, I have a method that enters the value 1 into the database. So, if a user visits for the first time, $tourbus_verify will be 0, so the tour loads when the page loads. If the user has already visited the page before, the $tourbus_verify will be 1 so it won't auto load.

加载的游览如下-

<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>

到目前为止，一切都很好.现在，我有一个图标，单击该图标即可加载游览-

Everything works well so far. Now, I have an icon which upon clicking loads the tour -

<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-

This loads the same tour as before but with a different 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>

出于某种原因，这一次可以很好地工作，但是第二次触发了该游览的另一个实例，所以我最终同时运行了两个游览，如下图所示-

For some reason, this works well once, but fires an additional instance of the tour the second time, so I end up running two tours at the same time as shown in the image below -

因此，我必须单击每个Next两次以完成导览.有谁知道是什么原因造成的?谢谢！

So, I have to click each Next twice to finish the tour. Does anyone know what could be causing this? Thanks!

推荐答案

我这样看:

第$(selector).tourbus()行用于初始化插件并将某些功能绑定到元素selector.将其放在click事件处理程序中时，仅在单击时才初始化该元素.因此，如果您单击两次，那么您将初始化两次.我只能假设单击三次会在元素上初始化插件三次；等等.当您再次初始化时，先前的实例仍保持与该元素的连接.

The line $(selector).tourbus() is to initialize the plugin and bind some functionality to the element selector. When you put it inside the click event handler, you are initializing the element only when you click. So, if you click twice, then you are initializing twice. I can only assume clicking three times would initialize the plugin three times on the element; and so forth. When you initialize again, the previous instance(s) still remain attached the element.

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

So, by putting the line outside the click event handler, you are ensuring that the plugin is initialized only once.

这篇关于如何阻止jQuery TourBus在单击时创建两个实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！