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_与 my连接，email_address.id以便最终得到看起来像的选择器'#email_address_13'？

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

谢谢！

4

3 回答 3

3

我会将 id 添加到图标 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')%>")
});
于 2012-05-08T20:13:47.317 回答
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)。

谢谢您的帮助！

于 2012-05-09T07:02:14.227 回答
1

您可以将类添加到 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')%>")

`

于 2012-05-08T19:38:34.147 回答