Question

我有一种感觉，这将成为那些骨头问题之一。但是，它让我摸不着头脑。

我有一个部分根据对象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_与email_address.id连接起来，以便最终得到看起来像'#email_address_13'的选择器？

当我对'#email_addres_13'进行硬编码时，一切都很有效。所以这只是关于如何在我的edit.js.erb文件中动态生成div选择器的问题。

谢谢！

Answer 1

我会将id添加到图标img并在javascript级别连接它。您的HTML将如下所示（我已在编辑图标中添加了ID和类）：

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

Answer 2

搞定了......在edit.js.erb中完成了一行代码。

就连接而言，诀窍是：

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

由于这是在.erb文件中，我可以使用<%= @email_address.id.to_s %>来获取id（沿途将其从整数转换为字符串）。这需要进入$（）或抛出.html is not a function错误。所以，整个电话是：

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

由于按钮是表单的一部分，因此无需绑定click事件。根据定义，当单击按钮时，它会触发控制器方法（edit）和关联的javascript文件（edit.js.erb）。

感谢您的帮助！

Answer 3

您可以将类添加到div

<% @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中使用类选择器而不是id选择器

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

`

如何在javascript中动态生成div id

3 个答案: