2015-02-05 33 views
0

我正在使用Jekyll進行此項目。Uncaught ReferenceError - Jekyll項目中的Javascript

  • 是下面的目錄結構正確的標準傑奇項目
  • 我創建了一個資產的JavaScript文件夾。使用文件夾中的咖啡腳本文件
  • 我需要@import/@include這個JavaScript文件中的js用於的index.html嗎?

目錄結構

/project 
    /.sass-cache 
    /_includes 
    /_layouts 
    /_posts 
    /_sass 
    /_site 
    /about 
    /assets 
    /images 
     picture.png 
     nextpicture.jpeg 
    /js 
     welcome.coffee 
    /build 
    /buld 
    /css 
    /serve 
    .gitignore 
    _config.yml 
    feed.xml 
    index.html 
    nextpage.html 

的index.html

  • 這是網頁內容與標籤UL列表爲主要內容
  • 此選項卡式ul列表是博urbon筆芯模式稱爲手風琴選項卡,最小

主頁

--- 
layout: welcome 
--- 

<div class="home"> 


<h1>Title</h1> 

<ul class="accordion-tabs-minimal"> 
    <li class="tab-header-and-content"> 
    <a href="#" class="tab-link is-active">Tab Item</a> 
    <div class="tab-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p> 
    </div> 
    </li> 
    <li class="tab-header-and-content"> 
    <a href="#" class="tab-link">Another Tab</a> 
    <div class="tab-content"> 
     <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.</p> 
    </div> 
    </li> 
    <li class="tab-header-and-content"> 
    <a href="#" class="tab-link">Third</a> 
    <div class="tab-content"> 
     <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>  
    </div> 
    </li> 
    <li class="tab-header-and-content"> 
    <a href="#" class="tab-link">Last Item</a> 
    <div class="tab-content"> 
     <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna.</p> 
    </div> 
    </li> 
</ul> 


    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p> 

</div> 

<script type="text/javascript" src="/assets/js/welcome.js"></script> 

/assets/js/welcome.coffee

  • 的JavaScript是歡迎頁面,但它提出了Unde罰款引用錯誤

  • 我以前在Chrome瀏覽器檢查元素,看到JS這個問題

JS

--- 
--- 

$(document).ready -> 
    $(".accordion-tabs-minimal").each (index) -> 
    $(this).children("li").first().children("a").addClass("is-active").next().addClass("is-open").show() 
    return 

    $(".accordion-tabs-minimal").on "click", "li > a", (event) -> 
    unless $(this).hasClass("is-active") 
     event.preventDefault() 
     accordionTabs = $(this).closest(".accordion-tabs-minimal") 
     accordionTabs.find(".is-open").removeClass("is-open").hide() 
     $(this).next().toggleClass("is-open").toggle() 
     accordionTabs.find(".is-active").removeClass "is-active" 
     $(this).addClass "is-active" 
    else 
     event.preventDefault() 
    return 

    return 

問題

因此, javascript沒有正確鏈接到html文件。這是什麼未定義的參考錯誤?

在檢查元素

Uncaught: ReferenceError: $ is not defined

目標

  • JavaScript的控制段落文本對bourbon refills手風琴選項卡點擊顯示

目前,該選項卡顯示任何信息,因爲它們是display: none;直到JavaScript調用.show()

回答

1

$在jQuery是使用

請注意,在你的head.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
以下
相關問題