在每个函数jquery中设置另一个元素值
Set another element value in each function jquery
我想在每个函数的元素中设置另一个元素值。我的脚本(JS):
function getTotal() { $(':input[id^="barang_qty[]"]').keyup(function() {
var total = 0;
var $inputs = $(':input[id^="barang_qty[]"]');
$inputs.each(function (index) { total += parseFloat($(this).val()) * parseFloat($(this).attr('data-price'));
$("#barang_total[]").val(total);
});
$('#total').val(total);
});
HTML:
<td class="price">
<input type="text" name="barang_unit_price[]" readonly id="barang_unit_price[]" class="form-control">
</td>
<td>
<input type="text" name="barang_qty[]" id="barang_qty[]" onkeyup="getTotal()" class="form-control" >
</td>
<td>
<input type="text" name="barang_total[]" class="sum form-control" >
</td>
但是元素barang_total仍然是空的。
问候,谢谢
问题是在getTotal
方法中添加了一个keyup处理程序,所以第一个keyup不进行任何计算。
相反,您可以在getTotal()方法中使用内联调用进行计算
function getTotal() {
var total = 0;
var $inputs = $('input[name="barang_qty[]"]');
$inputs.each(function(index) {
var sum = parseFloat($(this).val()) * parseFloat($(this).attr('data-price')) || 0;
total += sum;
$(this).closest('tr').find('[name="barang_total[]"]').val(sum);
});
$('#total').val(total);
}
或者使用dom就绪处理程序来注册事件处理程序,而不是使用内联事件处理程序。
<input type="text" name="barang_qty[]" id="barang_qty[]" class="form-control" >
然后
jQuery(function() {
$('input[name="barang_qty[]"]').keyup(function() {
var total = 0;
var $inputs = $('input[name="barang_qty[]"]');
$inputs.each(function(index) {
var sum = parseFloat($(this).val()) * parseFloat($(this).attr('data-price')) || 0;
total += sum;
$(this).closest('tr').find('[name="barang_total[]"]').val(sum);
});
$('#total').val(total);
});
})
注意:如果您正在处理动态元素,那么您将不得不使用事件委派
演示:Fiddle
尝试这个
function getTotal() { $(':input[id^="barang_qty[]"]').keyup(function() {
var total = 0;
var $inputs = $(':input[id^="barang_qty[]"]');
$inputs.each(function (index) { total += parseFloat($(this).val()) * parseFloat($(this).attr('data-price'));
(function (total) {
$("#barang_total[]").val(total);
})(total);
});
$('#total').val(total);
});
您错过了名称为barang_total[]
的输入id。
试试这个,(我在jsbin中测试过,它很有效)
<td class="price">
<input type="text" name="barang_unit_price[]" readonly id="barang_unit_price[]" class="form-control" value="100">
</td>
<td>
<input type="text" name="barang_qty[]" data-price="100" id="barang_qty[]" onkeyup="getTotal()" class="form-control" value="2">
</td>
<td>
<input type="text" name="barang_total[]" id="barang_total[]" class="sum form-control" >
</td>
JS-
function getTotal() {
$(':input[id^="barang_qty[]"]').keyup(function() {
var total = 0;
var $inputs = $(':input[id^="barang_qty[]"]');
$inputs.each(function (index) {
total += parseFloat($(this).val()) * parseFloat($(this).attr('data-price'));
$(':input[id^="barang_total[]"]').val(total); //edited this line
});
$('#total').val(total);
});
}
演示:http://jsbin.com/kijifisinu/edit?html,js,输出
相关文章:
- 如何将Date字段设置为等于另一个Date+Int值,该值表示月份值
- 如何从onclick函数设置全局变量并将其传递给另一个JS文件
- JQuery在设置另一个值之前将附加值设置为null
- 将jquery ui窗口的父元素设置为另一个元素
- 如何在另一个函数调用中设置全局数组值
- 当用户设置另一个选择值时,如何通过 Javascript 设置另一个选择值
- 在 Parse.com 中设置另一个类的查询降序
- 如何使用列表框的一个值来设置另一个列表框的值
- 如何为模型中的类似记录设置另一个名称,以便与ext js中的表单字段进一步绑定
- 如何在 jquery 中设置另一个视图的正文内容
- 设置另一个控制器范围变量而不使用 angular.element (Angularjs)
- 如何使一个元素被填充以设置另一个元素's、 除此之外,html中溢出时文本可见
- 在每个函数jquery中设置另一个元素值
- 若ID有类,则设置另一个元素的属性
- 需要帮助:奇怪的JavaScript行为..一个变量在设置另一个变量时发生更改
- 如何在WebStorm中为JSHint设置另一个文件中定义的变量的范围
- 使用javascript设置另一个页面的img src
- 根据输入框的值动态地设置另一个输入框的max属性
- 为每个元素设置另一个列的高度
- 删除或设置另一个值为URL参数