Question

我用它来运行jquery函数：

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

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

在页面加载的同时，它们不是同时运行，而是如何让它们一次运行一个？

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

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

Answer 1

由于透露没有任何关于此的官方文件，我快速阅读源代码并试一试。希望它会有所帮助

$('#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

Answer 2

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

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

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

有一个函数可以根据索引加载模态并推进索引。

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

加载初始模态（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来解释这个概念。

Answer 3

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

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

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

3 个答案: