javascript - jQuery 在多个嵌套字段上仅适用于第一个字段

Question

我再次寻求有关 jQueries 的帮助，因为我在这方面很弱。我已成功在我的订单表单上实现了 jQuery，以便在通过 collection_select 下拉菜单选择 Product_id 时在文本字段中显示产品:价格。

我的表格如下:

<%= form_for(@order) do |f| %>
.
.
.
<%= f.add_nested_fields_link :single_orders, "Add Product" %>
<%= f.nested_fields_for :single_orders do |builder| %>
  <div class = "form-inline">
    <%= builder.collection_select :product_id, @products, :id, :select_product, {:prompt => "choose product"}, {:class => "product_selection form-control"}  %>
    <%= builder.text_field :ctn_price, placeholder: "Price/carton", id: "ctn_price", readonly: true, class: 'ctn_price_field form-control' %>
    <%= builder.text_field :qty, placeholder: "Quantity",id: "quantity", class: 'form-control' %>
    <%= builder.text_field :price, placeholder: "Amount", id: "amount", readonly: true, class: 'form-control' %>
    <%= builder.remove_nested_fields_link %>
  </div>
<% end %>
.
.
.
<%= f.submit "place order", class: "btn btn-primary" %>
<% end %>

我能够通过orders.js.coffee文件通过jQuery获取product_prices

jQuery ->
  $(".product_selection").on "change", ->
      $.ajax
        url: "/orders/get_product_prices"
        type: "GET"
        dataType: "script"
        data:
          product_id: $('.product_selection option:selected').val()

并使用 get_product_prices.js.erb 显示它

$('.ctn_price_field').val(<%= @product.price %>)    

一切正常，当我添加超过 1 个嵌套字段时，jQuery 似乎只能检测到第一个嵌套字段，并且只能更改第一个 .ctn_price_field 我想要完成的是在中生成多个嵌套字段同样的形式，并且能够根据所选产品更改每​​个nested_field:price。提前致谢!!

有人可以帮我吗？

Answer 1

您需要为该类运行每个元素才能访问与同一类关联的所有元素。喜欢 -

$(".product_selection").each(function() {
    // ...
});

并确保在 HTML 中绑定(bind)元素后调用此绑定(bind)。

或者你可以使用 -

$('.product_selection').change(function(){
   // code goes here
});