Question

我有各种输入，每个输入通过数据属性具有不同的价格：

 <%= f.number_field :item, class: "test", :data => {:price => '10.25'}

用户可以选择他们想要的商品数量，因此我需要将商品的价格乘以项目的价格。

$( document ).ready(function() {
  $(".test").on('change', function() {
    a = $(".test").val() * $(".test").data("price") + "€";
    $(".resultado").html(a);
  });
});

这适用于1输入，但由于我有4个输入，每个都有不同的价格，我需要得到9个输入的总价。

<%= f.number_field :item, class: "test", :data => {:price => '10.25'} %>
<%= f.number_field :seconditem, class: "test", :data => {:price => '10'} %>
<%= f.number_field :thirditem, class: "test", :data => {:price => '10.75'} %>
<%= f.number_field :fourthitem, class: "test", :data => {:price => '10.50'} %>

基本上，我需要得到这个：

A: Number of items * price of each item
Sum all of the "A" values

如何修改脚本/类以实现此目的？

非常感谢。

Answer 1

您可以使用.each()乘以返回的值.data()

$("input[type=button]").on("click", function() {

  let n = 1;

  $(".test").each(function() {
    n *= $(this).data().price;
  });

  $(".resultado").html(n);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="button" value="click" />
<div class="test" data-price="1"></div>
<div class="test" data-price="2"></div>
<div class="test" data-price="3"></div>
<div class="test" data-price="4"></div>

<div class="resultado"></div>

Answer 2

假设每个项目的价格和数量不同，以下重构应该有效。 Here's a JSFiddle with the working demo

$( document ).ready(function() {
  $(".test").on('change', function() {
    var total = 0;
    $.each( $('.test'), function( key, value ) {
      total += $(this).val() * $(this).data("price");
    });
    $(". resultado").html(total + "€");
  });
});

如何对输入

2 个答案: