基金会 Joyride 问题

Posted 2023-05-09

【中文标题】基金会 Joyride 问题

【英文标题】：Foundation Joyride issues

【发布时间】：2016-02-09 21:46:05

【问题描述】：

我正在尝试在我的网站中使用 Foundation 的兜风。我在Zurbs主页上拿了这样的例子

<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">
    <p>Hello and welcome to the Joyride <br>documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">
    <h4>Stop #1</h4>
    <p>You can control all the details for you tour stop. Any valid html will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">
    <h4>Stop #2</h4>
    <p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End" data-prev-text="Prev">
    <h4>Stop #3</h4>
    <p>It works as a modal too!</p>
</li>

然后在 javsScript 中我像这样初始化它

$(document).foundation('joyride', 'start');

我在控制台上收到此错误，

未捕获的 RangeError：超出最大调用堆栈大小

关于我如何得到这个错误的任何解释？

【问题讨论】：

如果删除$(document).foundation(); 代码会怎样？您仍然收到错误消息吗？

是的，然后它消除了错误。

您是否包含一个带有id="firstStop" 的元素，以便Joyride 有一个要附加的元素？

【参考方案1】：

听起来页面缺少 Joyride 要附加到的元素。您的代码包含 JoyRide 模式，但不包含要附加到的元素。

添加

<div id="firstStop">First Stop</div>

到您的 HTML。

这是一个有效的demo。

【讨论】：

非常感谢。那不见了。