带有 ERB 标签的 JavaScript

Question

我有一个网站，该网站的网格在一页上有多个帖子。我正在尝试编写一个 JavaScript 函数来更改页面上特定帖子的 html。

我的<% @posts.each do |post| %>里面有这个循环

<script type="text/javascript">
    var ids = '#<%= song.id %>';
    function tagInfo(tag) {
    $(ids).html(tag);
}
</script>

这是一个 onClick 函数。唯一的问题是，该函数无法正确获取 ID。当我点击按钮时，什么也没有发生。如果我将它的 ids 变量更改为“#5”，它将在第五篇文章中起作用。但是当我使用 erb 标签时它不起作用。

当我检查页面时，脚本看起来像这样

<script type="text/javascript">
var ids = '#5';
    function tagInfo(tag) {
        $(ids).html(tag);
    }
</script>

所以它应该可以工作......任何建议。我尝试过 <%= raw Song.id %> 但这不起作用。

带有 onClick 处理程序的帮助函数

module SongsHelper
    def tags(tag_list)
      markup = ""
      tag_list.each do |tag|
        markup += content_tag(:a, tag, :class => tag, :onClick => 'tagInfo("' + tag +'");')
      end
      raw(markup)
    end
end

Answer 1

当你停止使用内联 JavaScript 时，事情实际上要简单得多。对于调试甚至遵循应用程序流程来说，这看起来都是一场噩梦。

你需要考虑这一点

jQuery 使附加处理程序和遍历 DOM 变得如此简单，您无需像 1999 年那样破解它。

因此，您可以将事件处理程序与 data attributes 一起使用，而不是这种邪恶的困惑。 .

<div id="posts">
  <% @posts.each do |post| %>
    <article class="post">
      <!-- more stuff -->
      <button class="tryme" data-id="<%= post.id %>">Try Me</button>
    </acticle>
  <% end %>
<% end %>

然后我们可以创建一个事件处理程序:

$(document).ready(function(){
  $('.post .tryme').click(function(){
    alert("You clicked: " + $(this).data('id'));
  });
});

这个示例可能并不完全是您想要的，但您已经了解了总体思路。