javascriptでdiv idを動的に生成する方法

Question

これは骨頭の問題の1つになると感じています。しかし、それは私の頭を傷つけている。

私はオブジェクトIDに基づいてユニークなIDを持つdiv要素のシリーズを作成し、その部分を持っている：

<% @contact.email_addresses.each do |email_address| %> 
    <div id=<%= "email_address_"+email_address.id.to_s %>> 
    . 
    . do stuff 
    . 
    </div> 
<% end %> 

これは私にこのように見えるのdivのシリーズ与える：あなたのよう

<div id="email_address_13"> 
    foo@bar.com 
    <div class="form_icon" title="edit email address" rel="tooltip" ,=""> 
    <a data-remote="true" href="/email_addresses/13/edit?contact_id=2"> 
     <img height="11" width="11" src="/assets/mini_icons/fat_pencil.png" alt="Fat_pencil"> 
    </a> 
    </div> 
    <div class="form_icon" title="delete email address" rel="tooltip" ,=""> 
    <a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/email_addresses/13?contact_id=2"> 
     <img height="9" width="9" src="/assets/mini_icons/remove.png" alt="Remove"> 
    </a> 
    </div> 
</div> 

を各divには編集とキャンセルのボタンがあります。ここまでは順調ですね。

ユーザーが編集ボタンをクリックすると、divのコンテンツを編集可能なフォームに置き換えます。ですから、私のedit.js.erbファイルでは、次のようにします：

$('#email_address_13').html("<%= escape_javascript(render 'email_address_form')%>") 

ここに質問があります。私のedit.js.erbファイルでは、'#email_address_13'のようなセレクタで終わるように、email_address_を私のemail_address.idとどのように連結しますか？

私が'#email_addres_13'をハードコードすると、すべて美しく動作します。これは私のedit.js.erbファイル内でdivセレクタを動的に生成する方法に関する質問です。

ありがとうございました！

Answer 1

はそれを手に入れました。.. edit.js.erb内の1行のコードが全部できます。連結の点で

、トリックである：

$('#email_address_<%= @email_address.id.to_s %>')

この.erbファイルにあるので、私はidは（途中の文字列に整数から変換つかむため<%= @email_address.id.to_s %>を使用することができ）。これは$（）の内部に入る必要があります。または.html is not a functionのエラーがスローされます。だから、全体の呼び出しは次のとおりです。

$($('#email_address_<%= @email_address.id.to_s %>')).html("<%= escape_javascript(render 'email_address_form')%>");

ボタンがフォームの一部であるため、クリックイベントをバインドする必要はありません。定義により、ボタンをクリックすると、コントローラーメソッド（edit）と関連するJavaScriptファイル（edit.js.erb）がトリガーされます。

ありがとうございました！

Answer 2

あなたは、私がアイコンにIDを追加しただろう代わりに、IDセレクタ

$('.your-class').html("<%= escape_javascript(render 'email_address_form')%>") 

`

Answer 3

をクラスセレクタを使用して

<% @contact.email_addresses.each do |email_address| %> 
    <div class='your-class' id=<%= "email_address_"+email_address.id.to_s %>> 
    . 
    . do stuff 
    . 
    </div> 
<% end %> 

そしてedit.jsでのDIVするクラスを追加することができますimgを作成し、javascriptレベルで連結します。あなたのHTMLは、この（私は編集アイコンへのidとclassを追加しました）のようになります。今

<div id="email_address_13"> 
    foo@bar.com 
    <div class="form_icon" title="edit email address" rel="tooltip" ,=""> 
     <a data-remote="true" href="/email_addresses/13/edit?contact_id=2"> 
      <img id="13" class="edit" height="11" width="11" src="/assets/mini_icons/fat_pencil.png" alt="Fat_pencil"> 
     </a> 
    </div> 
    <div class="form_icon" title="delete email address" rel="tooltip" ,=""> 
     <a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/email_addresses/13?contact_id=2"> 
      <img height="9" width="9" src="/assets/mini_icons/remove.png" alt="Remove"> 
     </a> 
    </div> 
</div> 

、あなたの編集jsの関数は、そのようになります。

$(".edit").click(function() { 
    var id = $(this).id; 
    $('#email_address_' + id).html("<%= escape_javascript(render 'email_address_form')%>") 
});