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

【问题标题】：How to make jquery functions run one at a time如何使 jquery 函数一次运行一个
【发布时间】：2013-10-02 15:49:34
【问题描述】：

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

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

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

与其在页面加载时同时运行这两个，我怎样才能让它们一次运行一个？

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

让第一个加载，
然后当盒子关闭时，第二个盒子会加载。
等等……

【问题讨论】：

我查看了reveal 的源代码，看起来作者没有将它与.animate 正确集成——除非我遗漏了什么。你能看看如何使用.animate 进行链接，然后看看这些方法是否适用于reveal？
我对 jquery 不太好 - 你能解释一下吗？
我的错 - 我看错了。对不起！
你用的是Foundation's reveal吗？
我想是的，我从zurb.com/playground/reveal-modal-plugin得到了代码

标签： javascript jquery jquery-plugins reveal.js

【解决方案1】：

由于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，您有两个事件：reveal:open、reveal:close

【讨论】：

我已经添加了这个，但现在它根本不会关闭

【解决方案2】：

我目前无法访问 Foundation，因此这是基于文档的最佳猜测。

将模态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>

Here's a fiddle 尝试使用可点击的 div 来解释这个概念。

【讨论】：

在我的代码中......我已经复制了你在上面放的内容，它只显示第一个
@user2710234 - 试试我修改后的答案。我刚刚使用最新版本的 Foundation 对此进行了测试。

【解决方案3】：

你试过在reveal方法中使用回调吗？

$('#customer_popup_notes').reveal(function(){
  $('#customer_on_hold').reveal();
});

【讨论】：