如何使jquery函数一次运行一个

How to make jquery functions run one at a time

本文关键字：运行 一个 一次 何使 jquery 函数      更新时间：2023-09-26

我正在使用它来运行jquery函数：

<script type="text/javascript">$('#customer_popup_notes').reveal();</script>
<script type="text/javascript">$('#customer_on_hold').reveal();</script>

与其在页面加载时同时运行这两个，不如如何让它们一次运行一个？

它们是页面加载时出现的弹出框 - 所以我想：

  1. 使第一个加载，
  2. 然后当盒子关闭时，第二个将加载。
  3. 等等...

由于 reveal 没有任何关于此的官方文档，因此我快速通读了源代码并尝试了一下。希望会有所帮助

$('#customer_popup_notes').bind('reveal:close', function(){
  $('#customer_on_hold').reveal();
})
$('#customer_popup_notes').reveal();

更新：根据代码 https://github.com/zurb/reveal/blob/master/jquery.reveal.js，您有 2 个事件：reveal:open、reveal:close

我目前无法访问基金会，所以这是基于文档的最佳猜测。

将模式 id 描述符存储在数组中，并将索引设置为 0。

var arr = ['#customer_popup_notes', '#customer_on_hold', 'modal3', 'modal4'];
var index = 0;

有一个基于索引加载模态并推进索引的函数。

function loadModal () {
  $(arr[index]).foundation('reveal', 'open');
  index++;
}

加载初始模态（索引 = 0）。

loadModal();

单击close-reveal-modal类时，请等待模态关闭（自动 - 这是显示的一部分），然后在数组中加载下一个模态。

$(document).on('click', '.close-reveal-modal', function () {
  $(arr[index - 1]).foundation('reveal', 'close');
  if (index < arr.length) { setTimeout(loadModal, 300); }
});

它假设您的模态看起来像这样（请注意带有 class="close-reveal-modal" 的锚点）。

<div id="customer_popup_notes" class="reveal-modal">
  <h2>Awesome. I have it 1.</h2>
  <a class="close-reveal-modal">&#215;</a>
</div>

这是一个小提琴，试图使用可点击的div来解释这个概念。

您是否尝试过在 reveal 方法中使用回调？

$('#customer_popup_notes').reveal(function(){
  $('#customer_on_hold').reveal();
});
相关文章：