javascript - Rails : file nested fields, 显示在每个字段上选择的文件的名称

Question

我正在使用 cocoon gem 来添加带有嵌套字段的图像:

<div id="attachments">
    <%= f.simple_fields_for :attachments do |attachment| %>
    <%= render 'products/attachment_fields', form: attachment  %>
    <% end %>
        <div class="links" id="add_attachment" style="display: inline; float: right;">
           <%= link_to_add_association 'add more images', f, :attachments, form_name: 'form' %>
         </div>
</div>

这是部分.... _attachment_fileds.tml.erb:

<div class="nested-fields">
  <%= form.label :image, required: true %>
    <div class="input-group">
      <div class="custom-file" style="padding-top: 38px;">
        <%= form.input :images, label: false, as: :file, :input_html => { :class => 'custom-file-input', :style=>"cursor: pointer", :id=>"inputGroupFile01"} %>
        <label class="custom-file-label" for="inputGroupFile01" id="file-name" style="cursor: pointer;">Choose file</label>
      </div>
    </div>
       <div style="text-align: right;"><%= link_to_remove_association "remove", form %></div>
</div>

一切正常。

现在，对于使用 cocoon 生成的每个字段，我想用已生成的文件名替换标签字段中的 choose a file 文本选择。

起初我尝试了以下方法，但后来发现 cocoon gem 为每个字段生成了不同的 ID。

<script>
  $("#inputGroupFile01").change(function(){
      $("#file-name").text(this.files[0].name);
  });
</script>

所以现在我有点卡在如何实现上面的问题上了。非常感谢任何帮助。

Answer 1

html-id 在页面上应该是唯一的，因此您不能对重复字段使用唯一的 id。虽然页面可能会正确呈现，但在发布表单时它将忽略重复的 ID(因此会发布不正确/不完整的信息)。

其次，使用 jquery 很容易找到最近的元素。

因此在您的部分嵌套字段中删除所有 id，所以写类似

<%= form.input :images, label: false, as: :file, 
      :input_html => { :class => 'custom-file-input', :style=>"cursor: pointer"} %>
<label class="custom-file-label" style="cursor: pointer;">Choose file</label>

然后你可以写类似的东西(显然未经测试)

$(".nested-fields .custom-file-input").change(function(){
  $(this).siblings("label.custom-file-label").text(this.files[0].name);
});

有几个选项，我不确定哪个选择器效果最好。你可以上去，然后选择正确的标签:

 $(this).closest('.nested-fields').find('label.custom-file-label') 

我不确定只寻找 closest 标签是否可行？

 $(this).closest('label.custom-file-label') 

或者像我上面那样，用正确的选择器寻找 sibling。