对于类似电子商务的功能，我正在尝试创建所有选定项目（名称，数量，总价）的发票概览。

示例： 用户单击要预订的产品，然后获得一个选项表，其中包含与该产品相关的选项（option.name和option_quantity）。如果数量大于一，则应更新所选项目的发票总览。

当前方法：我当前的方法是已经在发票总览中创建所有选项行并隐藏它们。 option_quantity更新后，选项行将其显示更改为flex，从而显示在发票总览中。

• 请注意：表格option_quantity的{​​{1}}和id，并且与该选项相关的发票行的option.id和class相同，这样我就可以链接它们
• 目前还不知道如何获取该选项各行的发票行总价。

问题

• 我的方法似乎很麻烦，我想知道是否有更好的方法可以根据用户输入动态调整发票总览。

• 如果没有，如何在发票总览中获得/插入某个选项的总价格。

其他，我有一些辅助方法来计算Rails应用程序的期权价格，但不确定这是否有帮助，因为我使用JavaScript来更新价格。

代码

表格

option.id

发票总览（与上面的表格在同一页面上）

#where user sees all options belonging to a product_category and can fill in option_quantity
<%= simple_form_for [@booking] do |f|%>
<%= f.simple_fields_for :booking_options do |o| %>
      <div class="row">
        <div class="col-lg-5 col-5 border-bottom mb-3">
          <%= o.object.option.name %>
          <%= o.input :option_id,as: :hidden %>
        </div>
        <div class="col-lg-3 col-7 border-bottom mb-3">
          <b> <%= number_to_currency(online_booking_option_price(o.object.option,Date.parse(arrival),Date.parse(departure)),:unit=> @currency ) %></b>
        </div>
        <div class="col-lg-3 col-7 border-bottom mb-3">
          <%= o.input :option_quantity,label: false,collection: 1..20,:input_html => { :value => 0,:id => o.object.option.id,:class => "option_quantity" } %>
        </div>
      </div>
      <% end %>
[...]

脚本以在概述中获取并插入option_price

#invoice overview
[...name,quantity,price on product_category...]

#invoice lines related to options
<% @product_category.options.each do |option| %>
      <div class="online-booking-price-item online-booking-price-item-option-container <%= option.id %>">
        <div class="online-booking-price-item-name">
          <%= option.name %>
        </div>
        <div class="online-booking-price-item-price online-booking-price-item-option-price">

#below the wrong price,as this is the price for one quantity of option and does not take into account the given input.
          <%= number_to_currency(online_booking_option_price(option,:unit=> @currency ) %>
        </div>
    </div>
    <% end %>

app / helpers / online_booking_helper.rb

<script>
  document.addEventListener('turbolinks:load',function() {
    $('.online-booking-price-item-option-container').hide();


    var options = document.getElementsByClassname('option_quantity');

    for (var i = 0; i < options.length; i++) {
        options.item(i).addEventListener('change',(event) => {
          var optionId = event.target.id

          document.getElementsByClassname(optionId)[0].style.display = "flex" ;
        })
    }
  });
</script>