Question

我想在我的rails应用程序中隐藏并显示2个链接

<a href="mailto:name@example.com", class="send_email">Invite</a>
<a href="", class="email_sent">Undo</a>

在我的CSS中

.email_sent{display: none;}

我将其添加到页面底部

<%= javascript_tag do %>
 $(function(){
  $('.send_email > a').click(function(){
   $('.send_email').hide();
   $('.email_sent').show();
  });
  $('.email_sent > a').click(function(){
   $('.send_email').show();
   $('.email_sent').hide();
  });
 });
<% end %>

在控制台中我收到以下错误

Uncaught ReferenceError: $ is not defined(anonymous function)

该网页的来源显示了这个

<script>
//<![CDATA[
$(function(){
$('.send_email > a').click(function(){
$('.send_email').hide();
$('.email_sent').show();
});
$('.email_sent > a').click(function(){
$('.send_email').show();
$('.email_sent').hide();
});
});
//]]>
</script>

如何修复javascript？

Answer 1

在JQuery库中定义的

$变量，因此您应该先将它包含在您的页面中。检查assets/javascripts/application.js是否包含此库。

仅供参考：您的a标记有逗号，可能会导致任何渲染问题。删除它。

Answer 2

您的javascript代码应放在以下标记之后。

<%= javascript_include_tag "application" %>

因为application.js文件包含jQuery。在成功加载jQuery之后，必须加载您的脚本。上面的代码行包括application.js到您的网页。

将javascript添加到rails应用页面

2 个答案: