我有一个表单，人们可以从产品列表中输入他们想要的数量。每个输入值代表他们想要的金额，属性data-price存储产品的价格。
我正在使用这个jquery代码来汇总字段值
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".number.qty_input").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".number.qty_input").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#the_price_v_m").html(sum.toFixed(2));
}
现在我需要对其进行自定义，以便它允许我将每个字段的属性数据价格乘以字段值。我已经尝试了一些不成功的方法，我想知道我是否可以得到一些帮助。
谢谢！
哦我使用的html是
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
答案 0 :(得分：2)
如果没有html，你的问题有点令人困惑，但我认为你想要将循环中的每个项目乘以它的价格，该价格存储在data-*属性中。所以改变这一行：
sum += parseFloat(this.value);
到此：
sum += parseFloat(this.value * $(this).data('price'));
在不了解您的代码的情况下，可能需要进行一些额外的解析：
sum += parseFloat(this.value) * parseFloat($(this).data('price'));
供参考：
.data('price')将为您提供jQuery对象上名为data-price的属性。
答案 1 :(得分：0)
您不必手动迭代jQuery对象来附加事件处理程序，jQuery会为您执行此操作。您可以使用data()方法访问数据属性的值。
$(document).ready(function() {
$(".number.qty_input").keyup(function() {
var sum = 0;
//iterate through each textboxes and add the values
$(".number.qty_input").each(function() {
var price = $(this).data("price")
//add only if the value and price is a number
if (this.value.length && !isNaN(this.value) && !isNaN(price))
sum += parseFloat(this.value) * parseFloat(price);
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#the_price_v_m").html(sum.toFixed(2));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<span id="the_price_v_m"></span>
答案 2 :(得分：0)
一种方法是使用
// assign a keyup event-handler to each of the 'input.qty_input' elements:
$('input.qty_input').on('keyup', function(e)
// create a temporary variable (to avoid recreating a variable in the map():
var tmp,
// iterate over the .qty_input elements, using map()
sum = $('.qty_input').map(function() {
tmp = $(this);
// returning the numeric result of the entered-value multiplied by the data-price:
return (+tmp.val() * tmp.data('price')) || 0;
// use get() to form an array:
}).get().reduce(function(a, b) {
// reducing the array to a single value, summing all the array-elements together:
return a + b;
});
// assigning the sum to the '#result' element (or whatever you want to do):
$('#result').text(sum);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<span id="result"></span>
参考文献：