如何使用 Cocoon 和 Javascript 获取输入值？

Question

我尝试实现一个简单的订单管理系统，用户可以在其中创建新命令并向它们添加两种类型的产品。当用户选择产品并输入数量时，总价会动态计算并显示在最后一个字段中。为了向订单中添加新产品线，我使用 gem Cocoon。

我的问题是我无法计算每个添加了 Cocoon 的新产品的总价。每次我输入一个数量，我都会从第一行得到总价。有没有人可以帮我解决这个问题？

这是我的观点/订单/_form.html.erb：

<%= form_for @order do |f| %>

    <div id="item">
       <%= f.fields_for :line_items do |li| %>
          <%= render partial: "line_item_fields", locals: {f: li} %>
       <% end %>
       <div class="link form-group"><%= link_to_add_association "Ajouter un produit", f, :line_items %></div>
    </div>

    <div class="actions">
        <%= f.submit "Commander", class: "btn btn-primary" %> 
    </div>

<% end %>

这是我的观点/订单/_line_items.html.erb：

<div class="nested-fields form-inline">

   <div class="form-group">
     <%= f.label "Type de produit : " %>
     <% if current_user.recruiter.company.pricing_profile.name == ("JobCards single" || "TM Basic") %>
       <%= f.select(:name, options_for_select([['Job card', 'Job card']]), {}, {class: "product_name"}) %>
     <% else %>
       <%= f.select(:name, options_for_select([['Job card', 'Job card'], ['Job page', 'Job page']]), {}, {class: "product_name"}) %>
     <% end %>
   </div>

   <div class="form-group">
     <%= f.label "Quantité : " %>
     <%= f.text_field :quantity, class: "quantity" %>
   </div>

   <div class="form-group">
     <%= f.label "Prix total : " %>
     <%= f.text_field :price, class: "total_price" %>
   </div>

   <%= link_to_remove_association "Supprimer", f %>
</div>

这是我的资产/javascripts/orders.js.erb：

$(document).ready(function() {

   function getTotal(p, q) {
       var r = 0;

       if (q <= 4) {
           r = 1;
       } else if (q >= 5 && q <= 9) {
           r = 0.85;
       } else if (q >= 10 && q <= 24) {
           r = 0.75
       } else if (q >= 25 && q <= 49) {
           r = 0.65
       } else if (q >= 50 && q <= 99) {
           r = 0.55
       } else if (q >= 100 && q <= 249) {
           r = 0.45
       } else if (q >= 250 && q <= 500) {
           r = 0.40
       }

       return q * p * r;
   }

   function getUnitCost(product_name) {
       var unit_cost = 0;

       if(product_name == "Job page") {
           unit_cost = gon.jp_unit_cost
       } else if (product_name == "Job card") {
           unit_cost = gon.jc_unit_cost
       }

       return unit_cost;
   }

   $(document).on('change', '.product_name', function() {
       var q = $(".quantity").val('');
       $('.total_price').val('');

   });

   $(document).on('keyup', '.quantity', function() {
       var product_name = $(".product_name").val();
       var q = $(".quantity").val();
       var p = getUnitCost(product_name);
       var total = getTotal(p, q);
       $('.total_price').val(total)
   });

   $("#item").on('cocoon:after-insert', function(e, insertedItem) {
       var quantity = insertedItem.find('.quantity').attr('id');
       $(document).on("keyup", '#' + quantity, function() {
        var q = $("#" + quantity).val();
        var product_name = $("#" + insertedItem.find('.product_name').attr('id')).val();
        var p = getUnitCost(product_name);
        var total = getTotal(p, q);
        $("#" + insertedItem.find('.total_price').attr('id')).val(total);

    });
});

Answer 1

我注意到的第一件事：在getUnitCost 中，您指的是gon，但我看不出它是如何设置或更改的？但我假设它指的是一个固定值。

然后我看到你有一个cocoon:after-insert 回调，但我认为在那个阶段数量总是空的？

但是，在您的 change 和 keyup 事件中，您犯了同样的错误：您不再考虑实际触发更改的字段。在任何product-name 中的change 上，您清除了所有 个数量？

因此，例如，当数量发生变化时，您必须使用该特定数量。现在您执行$('.quantity').val()，它将返回第一个数量的值。所以做类似的事情

$(document).on('keyup', '.quantity', function() {
   var this = $(this);
   var parent_nested_item = this.parent('.nested-fields'); 
   var product_name = parent_nested_item.find(".product_name").val();
   var q = this.val();
   var p = getUnitCost(product_name);
   var total = getTotal(p, q);
   parent_nested_item.find('.total_price').val(total)
});

注意：此代码未经测试，只是一个帮助您入门的示例。

简而言之，回顾一下：使用触发事件的元素 ($(this))，然后使用 jquery dom 遍历方法在正确的“范围”中找到正确的项目。