动态生成字段的计算

Question

我在表单中有一些动态生成的字段。请参阅下面的代码。

<% count = 0 %>
<% @details.each do |detail| %>
<div class="row">
    <div class="col l3">
        <div class="input-field string optional disabled bill_bill_details_item_name">
            <input class="string optional disabled" disabled="disabled" type="text" name="bill[bill_details_attributes][<%= count %>][item_name]" id="bill_bill_details_attributes_<%= count %>_item_name" value="<%= detail.item_name %>" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_name]" id="bill_bill_details_attributes_<%= count %>_item_name" value="<%= detail.item_name %>" />
        </div>
    </div>
    <div class="col l3">
        <div class="input-field decimal optional disabled bill_bill_details_quantity">
            <input class="numeric decimal optional disabled" disabled="disabled" type="number" step="any" name="bill[bill_details_attributes][<%= count %>][quantity]" id="bill_bill_details_attributes_<%= count %>_quantity" value="<%= detail.item_quantity %>" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][quantity]" id="bill_bill_details_attributes_<%= count %>_quantity" value="<%= detail.item_quantity %>" />
        </div>
    </div>
    <div class="col l3">
        <div class="input-field decimal optional bill_bill_details_cost">
            <input class="numeric decimal optional" type="number" step="any" name="bill[bill_details_attributes][<%= count %>][cost]" id="bill_bill_details_attributes_<%= count %>_cost" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_type]" id="bill_bill_details_attributes_<%= count %>_item_type" value="<%= detail.item_type %>" />
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_id]" id="bill_bill_details_attributes_<%= count %>_item_id" value="<%= detail.item_id %>" />
        </div>
    </div>
    <div class="col l3">
        <div class="input-field decimal optional disabled bill_bill_details_item_total">
            <input class="numeric decimal optional disabled" disabled="disabled" type="number" name="bill[bill_details_attributes][<%= count %>][item_total]" id="bill_bill_details_attributes_<%= count %>_item_total">
            <input type="hidden" name="bill[bill_details_attributes][<%= count %>][item_total]" id="bill_bill_details_attributes_<%= count %>_item_total" />
        </div>
    </div>
</div>
<% count += 1 %>
<% end %>

生成如下内容：

我需要让用户输入每件商品的成本，然后自动计算最后一列中的价值。我尝试通过向成本输入添加 class 来进行模糊处理，但它会导致问题，因为它会在 returns 访问返回

之前触发模糊事件近 100 次

实现此目标的最佳方法是什么？我希望使用 CoffeeScript 的非干扰性解决方案。

Answer 1

您可以通过在该字段上使用 key_up jquery 事件来实现此目的和总成本的设定值。我可以给你举个例子：-

您可以相应地修改它

  $('#cost-field-id').on('keyup', function(e){
    var cost = parseFloat($(this).val());
    $('#total-calculation-field-id').val((cost).toFixed(2));
  });

Answer 2

我最终能够做到这一点的方法是在动态字段生成代码中添加一个 class。因此，尽管字段的 id 发生了变化，但我仍然会有一个 class 保持不变。

然后我可以在 class 上调用更改并获取所需的详细信息。

下面的示例代码。

$(document).on('change', 'input.mycost', function() {
  var cost, id, quantity, quantity_id, total, total_id;

  // this will provide me with the count variable value
  // as i know it will always be in this position of the string.
  id = this.id.split('_')[4];

  // I can then use the same to get generate the id's of other tags.
  // and perform the calculations I need to make.
  total_id = '#bill_bill_details_attributes_' + id + '_item_total';
  quantity_id = '#bill_bill_details_attributes_' + id + '_quantity';
  quantity = parseFloat($(quantity_id).val());
  cost = parseFloat($(this).val());
  total = quantity * cost;
  return $(total_id).val(total.toFixed(2));
});

动态生成字段的计算

calculations on dynamically generated fields

javascript

jquery

ruby-on-rails

coffeescript