未捕获的类型错误：对象 [对象对象] 没有方法“轨道”答案

【问题标题】：Uncaught TypeError: Object [object Object] has no method 'orbit'未捕获的类型错误：对象 [对象对象] 没有方法“轨道”
【发布时间】：2014-04-10 12:54:46
【问题描述】：

我一直在搞乱轨道（zurb-foundation）。我想自定义幻灯片，但遇到了一个恼人的错误： “未捕获的类型错误：对象 [对象对象] 没有方法‘轨道’” 看起来foundation.orbit.js 脚本没有定义。另一个奇怪的事情是在这个脚本中，函数以 ;(function ($, window, document, undefined) 开头的 ';' 是正常的吗？代码如下：

<head>
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width">
    <title> - Welcome to Foundation</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="/Content/landing-page.css" rel="stylesheet">
    <script src="/Scripts/jquery-1.8.2.js"></script>
    <script src="/Scripts/jquery.cookie.js"></script>

    <script src="/Scripts/jquery-ui-1.8.24.js"></script>

    <link href="/Content/foundation/foundation.css" rel="stylesheet">
    <link href="/Content/foundation/foundation.mvc.css" rel="stylesheet">
    <link href="/Content/foundation/app.css" rel="stylesheet">
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <meta class="foundation-data-attribute-namespace">
    <meta class="foundation-mq-xxlarge">
    <meta class="foundation-mq-xlarge">
    <meta class="foundation-mq-large">
    <meta class="foundation-mq-medium">
    <meta class="foundation-mq-small">
</head>
<body>
    <div class="row">
    <div class="large-1 columns">
    </div>
    <div class="large-10 columns large-centered">
        <section class="full-grid">
            <div id="travelled-places">
                <img class="border" src="/Content/images/landing/canada-national-park.jpg" alt="Canada National Park" title="Canada National Park" data-thumb="~/Content/images/landing/canada-national-park.jpg" style="display: block; z-index: 1;">                    
                <img class="border" src="/Content/images/landing/china-gardens.jpg" alt="China Gardens" title="China Gardens" data-thumb="~/Content/images/landing/china-gardens.jpg" style="display: none; z-index: 1;">
                <img class="border" src="/Content/images/landing/grand-canyon.jpg" alt="Grand Canyon" title="Grand Canyon" data-thumb="~/Content/images/landing/grand-canyon.jpg" style="display: none; z-index: 1;">
                <img class="border" src="/Content/images/landing/hawaii.jpg" alt="Hawaii" title="Hawaii" data-thumb="~/Content/images/landing/hawaii.jpg" style="display: none; z-index: 1;">
            </div>                
            <div class="cn-bar">
                <div class="cn-nav">
                    <a href="#" class="cn-nav-next">
                        <span>Previous</span>
                        <div style="background-image:url(/Content/images/landing/china-gardens.jpg);"></div>
                    </a>
                    <a href="#" class="cn-nav-next">
                        <span>Next</span>
                        <div style="background-image:url(/Content/images/landing/hawaii.jpg);"></div>
                    </a>
                </div>                    
            </div>
        </section>
    </div>
    <div class="large-1 columns">
    </div>
    <script src="/Scripts/fastclick.js"></script>
<script src="/Scripts/placeholder.js"></script>
    <script src="/Scripts/foundation/foundation.js"></script>
<script src="/Scripts/foundation/foundation.abide.js"></script>
<script src="/Scripts/foundation/foundation.accordion.js"></script>
<script src="/Scripts/foundation/foundation.alert.js"></script>
<script src="/Scripts/foundation/foundation.clearing.js"></script>
<script src="/Scripts/foundation/foundation.dropdown.js"></script>
<script src="/Scripts/foundation/foundation.equalizer.js"></script>
<script src="/Scripts/foundation/foundation.interchange.js"></script>
<script src="/Scripts/foundation/foundation.joyride.js"></script>
<script src="/Scripts/foundation/foundation.magellan.js"></script>
<script src="/Scripts/foundation/foundation.offcanvas.js"></script>
<script src="/Scripts/foundation/foundation.orbit.js"></script>
<script src="/Scripts/foundation/foundation.reveal.js"></script>
<script src="/Scripts/foundation/foundation.slider.js"></script>
<script src="/Scripts/foundation/foundation.tab.js"></script>
<script src="/Scripts/foundation/foundation.tooltip.js"></script>
<script src="/Scripts/foundation/foundation.topbar.js"></script>
    <script>
    //$(document).foundation();
    jQuery(document).ready(function ($) {
        $('#travelled-places').orbit({
            animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
            animationSpeed: 800,                // how fast animtions are
            timer: true,             // true or false to have the timer
            advanceSpeed: 4000,          // if timer is enabled, time between transitions 
            pauseOnHover: false,         // if you hover pauses the slider
            startClockOnMouseOut: false,     // if clock should start on MouseOut
            startClockOnMouseOutAfter: 1000,     // how long after MouseOut should the timer start again
            directionalNav: true,        // manual advancing directional navs
            captions: true,              // do you want captions?
            captionAnimation: 'fade',        // fade, slideOpen, none
            captionAnimationSpeed: 800,      // if so how quickly should they animate in
            bullets: false,          // true or false to activate the bullet navigation
            bulletThumbs: false,         // thumbnails for the bullets
            bulletThumbLocation: '',         // location from this file where thumbs will be
            afterSlideChange: function () { }    // empty function 
        });
    });
</script>

有什么想法吗？

提前致谢。

【问题讨论】：

你错过了 JS 文件：见foundation.zurb.com/docs/javascript.html
我的代码中有它们，但我忘了在帖子中添加它们。我刚刚更新了。
阅读我发布的链接，因为您包含错误内容并且没有初始化基础 JS。
再看看你的代码，因为你分别指定了每个插件，这很好。您需要取消注释此 $(document).foundation(); 以加载基础插件，然后才能使用它们。然后你需要正确调用orbit。向下滚动到本页JS部分foundation.zurb.com/docs/components/orbit.html
所以，我必须像这样调用foundation() 两次吗？：$(document).foundation(); $(document).foundation({ orbit: { animation: 'fade', .... 或者我应该调用轨道元素的基础？: $('#scope').foundation();

标签： jquery zurb-foundation orbit

【解决方案1】：

您的代码中存在一些问题：

您需要取消注释$(document).foundation(); 以初始化基础插件，然后才能使用它们。
您没有正确调用orbit，它是在document 上调用的，然后将data-orbit 属性添加到您的<div id="travelled-places"> 元素，如下所示：
```
$(document).foundation({
    orbit: {
        ... // your options
    }
});
```

请参阅Foundations Orbit 文档以获取更多参考。

【讨论】：