带有ERB标签的Javascript

Question

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

我在我的<% @posts.each do |post| %> <% @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处理程序的Helper函数

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年那样对其进行破解。

因此，您可以将事件处理程序与数据属性一起使用，以免造成这种混乱。

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

这个例子可能并不完全是您想要的，但是您已经了解了一般想法。