动态生成字段的计算

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 %>

生成如下内容：

我需要让用户输入每个项目的费用，然后自动计算最后一栏中的值。 我曾尝试通过在成本输入中添加一个类来进行模糊处理，但由于它触发模糊事件将返回访问权之前将近100次，因此会引起问题，

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

Answer 1

您可以通过对该字段使用key_up jquery事件并设置总费用的值来实现此key_up 。 我可以举一个例子：

您可以相应地对其进行修改

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

Answer 2

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

然后，我可以在课程上进行更改，并获取所需的详细信息。

下面的示例代码。

$(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));
});