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

這個例子可能並不完全是您想要的，但是您已經了解了一般想法。