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在document函数上没有ready的情况下加载。因此，请确保您的代码包含在$(document).ready函数中，如下所示：

$(document).ready(-> $('#form-show').click(-> $("#form-section").slideDown() ) )
您的jquery未正确定义。检查您获得的任何控制台错误。并将其发布在此处。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用CoffeeScript在我的Rails模板中显示div？

2 个答案: