Javascript 使用cocoon gem-Ruby On Rails为每个项目添加一个唯一的ID

问候！我目前正在创建一个买卖系统，为此我支持cocoon，它允许我将多个项目附加到购买中，但是我试图在注册购买之前计算每个项目的价格，但当前代码计算价格。第一个项目，其他项目，不，显然这是因为每个项目必须有一个唯一的id，请尝试附加一个时间。现在，一个SecureRandom.uuid，但是，所有项目都继承相同的id，而不是独立和唯一的，cocoon通过某种方式为每个项目提供一个唯一的id，并且可以根据我的代码来计算每个项目的价格，我感谢你的帮助

输入项目字段.html.erb

<tr class="item">
    <td><%= f.number_field :product_id %></td>
    <td><%= f.text_field :quantity, id: "quantity" %></td>
    <td><%= f.text_field :price, id: "price", class: "form-control is-valid" %></td>
    <td><%= f.number_field :utility %></td>
    <td><input type="text" id="result" readonly></td>    
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>
    $('#quantity, #price').keyup(function(){
        var cant = parseFloat($('#quantity').val()) || 0;
        var price = parseFloat($('#price').val()) || 0;
        var result = cant * price
        $('#result').val(result);
    })
</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
      <th>Utilidad</th>
      <th>Precio</th>
      <th>Opciones</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>    
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Agregar item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<tr class="item">
    <td><%= f.number_field :product_id, class: "form-control is-valid" %></td>
    <td><%= f.text_field :quantity, class: "field quantity form-control is-valid" %></td>
    <td><%= f.text_field :price, class: "field price form-control is-valid" %></td>
    <td><input type="text" class="field subtotal form-control"></td>
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>

    $('.field').keyup(function() {
        var price = [];
        var quantity = [];

        $('.price').each(function(i, obj) {
            price.push(+obj.value);
        });

        $('.quantity').each(function(i, obj) {
            quantity.push(+obj.value);
        });

        console.log(price)
        console.log(quantity)

        var result = 0;

        price.map((o,i)=>{
        $(".subtotal").eq( i ).val(o*quantity[i]); 
        result += o*quantity[i];
        });

        $(".result").val(result); 
    })

</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <div class="float-right">
    <label for="">Total</label>
    <input type="text" class="multi result">  
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Add item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

$（'#数量，#价格'）.keyup（函数（）{
var cant=parseFloat（$（'#quantity'）.val（））| 0；
var price=parseFloat（$（'#price'）.val（））| 0；
var结果=铁路超高*价格
$（'#result'）.val（result）；
})

form.html.erb

<tr class="item">
    <td><%= f.number_field :product_id %></td>
    <td><%= f.text_field :quantity, id: "quantity" %></td>
    <td><%= f.text_field :price, id: "price", class: "form-control is-valid" %></td>
    <td><%= f.number_field :utility %></td>
    <td><input type="text" id="result" readonly></td>    
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>
    $('#quantity, #price').keyup(function(){
        var cant = parseFloat($('#quantity').val()) || 0;
        var price = parseFloat($('#price').val()) || 0;
        var result = cant * price
        $('#result').val(result);
    })
</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
      <th>Utilidad</th>
      <th>Precio</th>
      <th>Opciones</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>    
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Agregar item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<tr class="item">
    <td><%= f.number_field :product_id, class: "form-control is-valid" %></td>
    <td><%= f.text_field :quantity, class: "field quantity form-control is-valid" %></td>
    <td><%= f.text_field :price, class: "field price form-control is-valid" %></td>
    <td><input type="text" class="field subtotal form-control"></td>
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>

    $('.field').keyup(function() {
        var price = [];
        var quantity = [];

        $('.price').each(function(i, obj) {
            price.push(+obj.value);
        });

        $('.quantity').each(function(i, obj) {
            quantity.push(+obj.value);
        });

        console.log(price)
        console.log(quantity)

        var result = 0;

        price.map((o,i)=>{
        $(".subtotal").eq( i ).val(o*quantity[i]); 
        result += o*quantity[i];
        });

        $(".result").val(result); 
    })

</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <div class="float-right">
    <label for="">Total</label>
    <input type="text" class="multi result">  
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Add item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

产品
康蒂达
普里西奥
实用的
普里西奥
选择素

“表#产品项”，：“数据关联插入方法”=>“附加”，类：“btn btn次要”%>

尝试更改脚本：使用jQuery获取当前项的

div的元素并相应地更新它。另外，在只读输入字段中将

id

替换为

class

。比如：

剧本是：

<script>
    $('#quantity, #price').keyup(function(){
        var cant = parseFloat(this.nextElementSibling('#quantity').val()) || 0;
        var price = parseFloat(this.nextElementSibling('#price').val()) || 0;
        var result = cant * price
        this.nextElementSibling('.result').val(result);
    })
</script>

$（'#数量，#价格'）.keyup（函数（）{
var cant=parseFloat（this.nextElementSibling（'#quantity'）.val（））| 0；
var price=parseFloat（this.nextElementSibling（'#price'）.val（））| 0；
var结果=铁路超高*价格
this.nextElementSibling（'.result'）.val（result）；
})

---

此代码未经测试，但可能会起作用。希望能有所帮助。

问候！不幸的是，我无法使用回调解决问题，我可能没有正确的方法，另一方面，一个名为Emeeus的用户给了我一个解决问题的答案，这很好：（帖子是西班牙语的），但是我在这里分享代码，以备将来参考：

\u input\u items\u fields.html.erb

<tr class="item">
    <td><%= f.number_field :product_id %></td>
    <td><%= f.text_field :quantity, id: "quantity" %></td>
    <td><%= f.text_field :price, id: "price", class: "form-control is-valid" %></td>
    <td><%= f.number_field :utility %></td>
    <td><input type="text" id="result" readonly></td>    
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>
    $('#quantity, #price').keyup(function(){
        var cant = parseFloat($('#quantity').val()) || 0;
        var price = parseFloat($('#price').val()) || 0;
        var result = cant * price
        $('#result').val(result);
    })
</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
      <th>Utilidad</th>
      <th>Precio</th>
      <th>Opciones</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>    
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Agregar item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<tr class="item">
    <td><%= f.number_field :product_id, class: "form-control is-valid" %></td>
    <td><%= f.text_field :quantity, class: "field quantity form-control is-valid" %></td>
    <td><%= f.text_field :price, class: "field price form-control is-valid" %></td>
    <td><input type="text" class="field subtotal form-control"></td>
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>

    $('.field').keyup(function() {
        var price = [];
        var quantity = [];

        $('.price').each(function(i, obj) {
            price.push(+obj.value);
        });

        $('.quantity').each(function(i, obj) {
            quantity.push(+obj.value);
        });

        console.log(price)
        console.log(quantity)

        var result = 0;

        price.map((o,i)=>{
        $(".subtotal").eq( i ).val(o*quantity[i]); 
        result += o*quantity[i];
        });

        $(".result").val(result); 
    })

</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <div class="float-right">
    <label for="">Total</label>
    <input type="text" class="multi result">  
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Add item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

$（'.field'）.keyup（函数（）{
var价格=[]；
var数量=[]；
$（'.price'）。每个（函数（i，obj）{
价格推动（+目标价值）；
});
$（'.quantity'）。每个（函数（i，obj）{
推送量（+目标值）；
});
控制台日志（价格）
控制台日志（数量）
var结果=0；
price.map（（o，i）=>{
$（“.subtotal”）.eq（i）.val（o*数量[i]）；
结果+=o*数量[i]；
});
$（“.result”）.val（result）；
})

input\u form.html.erb

<tr class="item">
    <td><%= f.number_field :product_id %></td>
    <td><%= f.text_field :quantity, id: "quantity" %></td>
    <td><%= f.text_field :price, id: "price", class: "form-control is-valid" %></td>
    <td><%= f.number_field :utility %></td>
    <td><input type="text" id="result" readonly></td>    
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>
    $('#quantity, #price').keyup(function(){
        var cant = parseFloat($('#quantity').val()) || 0;
        var price = parseFloat($('#price').val()) || 0;
        var result = cant * price
        $('#result').val(result);
    })
</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
      <th>Utilidad</th>
      <th>Precio</th>
      <th>Opciones</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>    
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Agregar item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<tr class="item">
    <td><%= f.number_field :product_id, class: "form-control is-valid" %></td>
    <td><%= f.text_field :quantity, class: "field quantity form-control is-valid" %></td>
    <td><%= f.text_field :price, class: "field price form-control is-valid" %></td>
    <td><input type="text" class="field subtotal form-control"></td>
    <td><%= link_to_remove_association "Remove", f, { wrapper_class: "item" } %></td>
</tr>

<script>

    $('.field').keyup(function() {
        var price = [];
        var quantity = [];

        $('.price').each(function(i, obj) {
            price.push(+obj.value);
        });

        $('.quantity').each(function(i, obj) {
            quantity.push(+obj.value);
        });

        console.log(price)
        console.log(quantity)

        var result = 0;

        price.map((o,i)=>{
        $(".subtotal").eq( i ).val(o*quantity[i]); 
        result += o*quantity[i];
        });

        $(".result").val(result); 
    })

</script>

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

  <div class="field">
    <%= f.label :invoice %> <br>
    <%= f.text_field :invoice %>
  </div>

  <div class="field">
    <%= f.label :provider %> <br>
    <%= f.text_field :provider %>
  </div>

  <div class="float-right">
    <label for="">Total</label>
    <input type="text" class="multi result">  
  </div>

  <table border="1" class="mt-4" width="100%" id="product-item">
    <thead>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </thead>
    <tbody>
      <%= f.fields_for :input_items do |item| %>
        <%= render "input_item_fields", f: item %>
      <% end %>
    </tbody>
  </table>

  <div class='links'>
    <br><%= link_to_add_association 'Add item', f, :input_items, :"data-association-insertion-node" => "table#product-item",:"data-association-insertion-method" => "append", class: "btn btn-secondary" %>
  </div>

  <hr>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

全部的
产品
量
价格
全部的

“表#产品项”，：“数据关联插入方法”=>“附加”，类：“btn btn次要”%>

您可以使用回调。例如，请参见感谢您回答Kedarnag，您能告诉我如何在回调中应用此功能吗？我非常感谢Emu，您帮了我一把，我刚刚尝试了一下，但出现了一个错误：

TypeError:$（…）。NextElementSibling未定义，错误行为：
var cant=parseFloat（$（this）.NextElementSibling（'#quantity'）.val（））| 0；var price=parseFloat（$（this）.nextElementSibling（'#price'）.val（））| 0
您认为会发生什么？将
$（this）.nextElementSibling
替换为
this.nextElementSibling
，并检查nextElementSibling的驼峰案例