Javascript - 在文本字段中添加数量时应用价格变化

Question

我正在使用 JavaScript 代码块来计算价格变化。我的应用程序是一个事件应用程序(使用 Ruby 作为后端)，我需要为用户提供一种功能，可以在可用空间数量的范围内预订任意数量的空间。

它需要像数量*价格一样简单

到目前为止我的努力根本没有奏效。这是我到目前为止的代码 -

booking.new.html.erb -

<%= simple_form_for [@event, @booking], id: "new_booking" do |form| %>

  <div class="calculate-total">
    <p>
      Confirm number of spaces you wish to book here:
      <input type="number" placeholder="1"  min="1" value="1">
    </p>
    <p>
      Total Amount
      £<span class="total" data-unit-cost="<%= @event.price %>">0</span>
    </p>
  </div>


  <span class="payment-errors"></span>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YYYY)</span>
      <input type="text" size="2" data-stripe="exp-month"/>
    </label>
    <span> / </span>
    <input type="text" size="4" data-stripe="exp-year"/>
  </div>
  </div>
<div class="panel-footer">    

  <%= form.button :submit %>


    </div> 

  <% end %>
    <% end %>

      </div>
    </div>
</div>  

<script type="text/javascript">
  $('.calculate-total input').on('keyup', calculateBookingPrice);

  function calculateBookingPrice() {
    var unitCost = parseFloat($('.calculate-total .total').data('unit-cost')),
        numSpaces = parseInt($('.calculate-total .num-spaces').val()),
        total = (numSpaces * unitCost).toFixed(2);

    if (isNaN(total)) {
      total = 0;
    }

    $('.calculate-total span.total').text(total);
  }

  $(document).ready(calculateBookingPrice)

</script>

我是 javascript 的新手，所以我担心我犯了一些相当简单的错误，导致它不起作用。我缩进不正确吗？我不是“瞄准”了正确的ID吗？我需要将 javascript 分成单独的 .js 文件吗？ Controller /模型中是否需要更多代码？

这是我的模型代码 -

booking.rb -

class Booking < ActiveRecord::Base

    belongs_to :event
    belongs_to :user

    def total_amount

        #quantity.to_i * @price_currency.to_money
        quantity.to_i * strip_currency(event.price)
    end

    private

        def strip_currency(amount = '')
            amount.to_s.gsub(/[^\D\.]/, '').to_f
        end



end

到目前为止，这就是我的 View 的样子(由于添加了字段，样式不正常 - 尚未更正) - 总金额仅显示 0(零)，因此甚至没有反射(reflect)初始事件的价格。一个空格，如 event.show View 页面所示。​​

我该如何纠正这一切？有没有更简单的 jQuery 选项/库？

Answer 1

您使用numSpaces = parseInt($('.calculate-total .num-spaces').val())获取 numSpaces 的值变量。

但是在这段代码中没有该类的元素。 我猜你是想找回这个

Confirm number of spaces you wish to book here: <input type="number" placeholder="1" min="1" value="1">

只需添加适当的类 <input type="number" placeholder="1" min="1" value="1" class="num-spaces">你会没事的。

希望我能有所帮助。