如何使用CoffeeScript在Rails模板中顯示div？

Question

我的索引頁面中包含以下代碼。

<button id= 'form-show' class= 'btn btn-primary form-btn'> Add Transaction</button
<div class='row'>
  <%=render 'form'%>
</div>

以及以下CoffeeScript：

$('#form-show').click ->
  $('#form-section').slideDown()

該按鈕應該顯示已在DOM中加載但通過以下方式隱藏的表單部分：

#form-section{
  display: none;
}

但是，當我單擊此按鈕時，沒有任何反應。 表格不顯示。 我不知道有什么問題。 這很簡單。

Answer 1

Add Transaction</button

缺少某些內容...再看一次...閉幕式> ...

Answer 2

我創建了一個代碼段。 我已將CoffeeScript轉換為javascript，因為此處的編輯器不支持它。 一切似乎都正常。

因此，我認為可能是以下原因造成的。

• 從Rails渲染的表單沒有相同的ID，即form-section

• 您的javascript加載時沒有ready功能的document 。 因此，請確保您的代碼包裝在$(document).ready函數中，如下所示：

  $(document).ready(-> $('#form-show').click(-> $("#form-section").slideDown() ) )

• 您的jquery定義不正確。 檢查您收到的任何控制台錯誤。 並張貼在這里。

 $('#form-show').click(function(){ $('#form-section').slideDown() }) 

 #form-section{ display: none; background: #de9a44; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <button id='form-show' class= 'btn btn-primary form-btn'> Add Transaction</button <div class='row'> <form id="form-section"> <h3>Form</h3> <input type="text" /> </form> </div>