如何总结从输入各种数据ATTR和价值

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

假设每个项目都有不同的价格和数量，下面的重构应该工作。 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 + "€"); 
    }); 
}); 

Answer 2

您可以使用.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>