Shopify，TypeError：$（...）。jcarousel不是一個函數

所以我看到了其他問題與這個相同的標題，我不認爲我遇到了他們有相同的問題（具體是因爲我我沒有使用Drupal，並且這些文件似乎正在加載頁面標題中，如下所示）。我明白它找不到那個功能，但我不知道爲什麼。這是theme.liquid頭裏面的代碼在那裏建立了JavaScript和樣式：

<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link rel="canonical" href="{{ canonical_url }}" /> 

    {% assign maxmeta = 155 %} 
    {% if template contains 'product' %} 
    <meta name="description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" /> 
    {% elsif template contains 'page' %} 
    <meta name="description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" /> 
    {% elsif template == 'index' and shop.description != '' %} 
    <meta name="description" content="{{ shop.description }}" /> 
    {% endif %} 


    {{ 'skinCustom.css' | asset_url | stylesheet_tag }} 
    {{ 'jquery-1.4.2.min.js' | asset_url | script_tag }} 
    {{ 'jquery.jcarousel.min.js' | asset_url | script_tag }} 

    {% if template == 'index' %} 
    <title>{{ shop.name }}</title> 
    {% elsif template == '404' %} 
    <title>Page Not Found | {{ shop.name }}</title> 
    {% else %} 
    <title>{{ page_title }} | {{ shop.name }}</title> 
    {% endif %} 

    {% include 'fb-open-graph' %} 

    {% case settings.header_font %} 
    {% when "Rancho, cursive" %} 
    <link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'> 
    {% when "'Amatic SC', cursive" %} 
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'> 
    {% when "'Sancreek', cursive" %} 
    <link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'> 
    {% when "'Ubuntu Condensed', sans-serif" %} 
    <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'> 
    {% endcase %} 

    {{ 'style.css' | asset_url | stylesheet_tag }}{% if template contains 'product' and settings.main_image_display == 'Lightbox' %} 
    {{ 'jquery.fancybox-1.3.4.css' | asset_url | stylesheet_tag }}{% endif %} 
    {{ 'modernizr.js' | asset_url | script_tag }} 
    {{ 'option_selection.js' | shopify_asset_url | script_tag }} 

    {% if template contains 'customers' %} 
    {{ "shopify_common.js" | shopify_asset_url | script_tag }} 
    {{ "customer_area.js" | shopify_asset_url | script_tag }} 
    {% endif %} 

    <script type="text/javascript"> 

    $(document).ready(function() { 
     $('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 }); 
    }); 

    </script> 

    {{ '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' | script_tag }} 

    {{ content_for_header }}

當頁面渲染我碰到下面的（我編輯了多餘的東西不屬於這個問題）。我把箭頭指向jcarousel依賴的js和樣式頁面的引用。在我試圖將其移植到Shopify項目之前，我在一個單獨的文件中有一個這樣的例子。

<head> 
    <meta charset="UTF-8"> 

    --> <link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/skinCustom.css?241" rel="stylesheet" type="text/css" media="all" /> 
    --> <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery-1.4.2.min.js?241" type="text/javascript"></script> 
    --> <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery.jcarousel.min.js?241" type="text/javascript"></script> 


    <link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/style.css?241" rel="stylesheet" type="text/css" media="all" /> 
    <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/modernizr.js?241" type="text/javascript"></script> 
    <script src="http://cdn.shopify.com/s/shopify/option_selection.js?aaf2a68ed9671e345bbc7eef1e63563c51bde6eb" type="text/javascript"></script> 



    <script type="text/javascript"> 

    $(document).ready(function() { 
    ERROR HERE --> $('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 }); 
    }); 

    </script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> 


<link rel="stylesheet" href="/global/theme-controls.css" type="text/css" /> 


</head>

我可以想象的唯一可能的事情就是其中一個腳本文件正在搞砸了。但我不確定除了取出其他腳本文件之外，我將如何進行調試。如果有人遇到類似的問題或對此有所瞭解，我將不勝感激。除了錯誤的執行之外，其他問題似乎都沒有得到答案（就像將腳本從頭開始）。我可能會做些愚蠢的事情，但我已經研究過這無數次，我看不到它是什麼。

感謝，

艾倫

來源

2013-02-13 Alan DeLonga

爲什麼要加載jquery兩次？一個可能的問題是jQuery使用美元符號。嘗試用'jQuery'替換它，以便使用'jQuery（'＃mycarousel'）'或嘗試使用jquery的noconflict模式。 http://api.jquery.com/jQuery.noConflict/ – Stuart 2013-02-13 01:47:52

我看了很多遍......猜想我需要第二雙眼睛。問題就在於，加載jquery兩次是搞砸了。我這樣做是因爲當我最初嘗試使用jcarousel時，它說它找不到它所依賴的jquery。所以我自己添加了它，只是假設它尚未加載它。感謝您的迴應。我一直試圖弄清楚這幾個小時。 – 2013-02-13 01:59:57

如果所有訂單都正確並且沒有衝突，會發生什麼情況。並且它仍然沒有被識別（但是你可以在控制檯中看到它被加載了） – 2016-12-30 09:03:32

我把我的評論從上面寫入回覆表單。

與此有關的兩個問題。首先，你要加載jQuery兩次。不要這樣做。其次，jQuery使用$可能會與其他JavaScript庫衝突，所以您應該使用jQuery或使用jQuery的noconflict mode.

來源

2013-02-13 03:30:00 Stuart

正如@ gaoshan88評論說我是裝的jQuery兩次。因爲當我最初添加jcarousel.js腳本時，它說沒有jquery文件。所以我再次自己添加它，不知道Shopify還通過google.apis添加了最新版本。不太清楚爲什麼它首先使用jquery給了我這個錯誤，但是當我把google.apis腳本引用出來的時候它就工作了。感謝您的快速響應，我很感激。

來源

2013-02-13 02:05:55

加載腳本時的順序很重要，根據它們對其他腳本的依賴關係來排序，jcarousel.js文件應該添加到jquery.js之後文件，因爲jcarousel依賴於jquery，從視覺上看起來很明顯：'$（）。jcarousel' – danronmoon 2013-02-13 02:10:50

雅一定是這個問題，我以爲我第一次嘗試的時候裝了jcarousel作爲最後一個腳本，但是我猜那是谷歌。 apis爲jquery之一低於它。 – 2013-02-13 02:36:13

Shopify，TypeError：$（...）。jcarousel不是一個函數

回答

相關問題