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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用CoffeeScript在我的Rails模板中显示div?相关的知识,希望对你有一定的参考价值。

我的索引页面中有以下代码。

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

但是当我点击这个按钮时没有任何反应。表格没有显示出来。我不知道会出现什么问题。这是一件简单的事情。

答案

Add Transaction</button

有些东西不见了......再看一下......关闭> ......

另一答案

我创建了一个片段。我已经将CoffeeScript转换为javascript,因为编辑器在这里不支持它。一切似乎都有效。

所以我认为以下原因可能是问题所在。

  • rails中呈现的形式不具有相同的id,即form-section
  • 您的javascript在document函数上没有加载ready。因此,请确保您的代码包含在$(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>

以上是关于如何使用CoffeeScript在我的Rails模板中显示div?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用CoffeeScript重新同步setTimeout()? Rails 5

CoffeeScript - 如何在 ruby​​ on rails 中使用咖啡脚本?

导轨 3.1。如何防止 Rails 使用 CoffeeScript?

如何在 Slim 模板中访问 CoffeeScript 引擎中的实例变量

如何在 rails3.1 中使用 ajax?

如何在 Rails 3.1 中为 CoffeeScript 使用选项“--bare”?