动态生成字段的计算

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 事件来实现此目的 并设定总成本的值。 我可以给你举个例子：-

你可以做相应的修改

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