javascript - 未捕获的 ReferenceError - Jekyll 项目中的 Javascript

Question

我在这个项目中使用 Jekyll。

• 以下目录结构对于标准 Jekyll 项目是否正确
• 我在 Assets 中创建了一个 javascript 文件夹。文件夹中有一个coffescript文件
• 我需要在 js 所在的 index.html 中 @import/@include 这个 javascript 文件吗？

目录结构

/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 列表是一种波本威士忌补充装模式，称为 Accordion-tabs-minimal

主页

---
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 用于欢迎页面，但出现了 undefined reference 错误

• 我在chrome浏览器中使用inspect element来查看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 文件。这个未定义的引用错误是什么？

检查元素后

未捕获:ReferenceError:$未定义

目标

• javascript 控制点击 bourbon refills 时段落文本的显示 Accordion 选项卡

目前，选项卡不显示任何信息，因为它们是 display: none;，直到 javascript 调用 .show()

Answer 1

$用于jquery

请记住在 head.html 中包含以下内容

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>