Ruby on Rails - Javascript/jQuery 到 Haml

Posted 2023-05-09

【中文标题】Ruby on Rails - Javascript/jQuery 到 Haml

【英文标题】：Ruby on Rails - Javascript/jQuery to Haml

【发布时间】：2017-04-24 05:31:41

【问题描述】：

我正在尝试在我的 Ruby on Rails 应用程序中实现这一点。唯一不起作用的是javascript代码。我已经尝试过 %script 和 :javascript。但由于某种原因，它没有加载。当我将鼠标悬停在单选按钮上时，它不显示任何内容。

Javascript/jQuery（来自 jsfiddle）：

$(document).ready(function()

$('#container').on('mouseenter', '#radiobtn', showBox);
$('#container').on('mouseleave', '#radiobtn', hideBox);

function showBox(e)
    var x = e.pageX + 20;
    var y = e.pageY + 20;
$('#hoverbox').fadeIn();
$('#hoverbox').offset( left: x, top: y );

);

function hideBox()
$('#hoverbox').fadeOut();

示例：http://jsfiddle.net/wrN2u/387/

自己的 Javascript 文件：

:javascript
 $(document).ready(function()
  $('#container1').on('mouseenter', '#radiobtn', showBox);
  $('#container1').on('mouseleave', '#radiobtn', hideBox);

  function showBox(e)
    var x = e.pageX + 20;
    var y = e.pageY + 20;
    $('#hoverbox').fadeIn();
    $('#hoverbox').offset( left: x, top: y );
  
 );

function hideBox()
$('#hoverbox').fadeOut();

HAML：

!!!
 %html
  %head
   = javascript_include_tag 'options.js'

    #container1
      %input:name => "optradio", :type => "radio", :id => "radiobtn"option1
      #hoverbox
    #container2
      %input:name => "optradio", :type => "radio", :id => "radiobtn"option2
      #hoverbox2

【问题讨论】：

jsfiddle 对我有用。如果您引用的 haml 代码已损坏，请务必包含它。

【参考方案1】：

This question 可能对你有帮助。我还在你的 js-fiddle 中注意到 Javascript 没有缩进。如果您使用的是 HAML，那么缩进至关重要。确保您的 JS 在 :javascript

之后的第二行的第一个缩进处开始

:javascript
  $(document).ready( function() 
    alert('working');
   );

或者。如果您尝试在 HAML 中包含 js 文件，则需要

= javascript_include_tag "my_js"

来自here。

另外，如果这没有帮助。查看您的 HAML 文件将非常有帮助。

【讨论】：

我的 javascript 文件已经在 :javascript 处给了我一个错误。错误：预期的语句。

你在你的 options.js 文件中写过 :javascript 吗？如果是这样，请将其删除。那是 HAML 代码。

我改变了它，但它仍然在悬停时没有任何作用。

没关系，我修好了！在您的帮助下，我在输入字段和课程中丢失了 id。