javascript - 使用 Jquery 计算文本框值但它不起作用
问题描述
我对这段代码有一些问题。代码无需循环即可工作,但我需要在每个循环中更改 div id、输入 id 和变量名称。"@id's" 值按顺序上升(例如:1-2-3 ....)。但我无法计算总和。这是我的代码;
<div class="row verigirisler_@id" id="turdiv_@id" style="display:none">
@{ foreach (var tbirimfiyat in ViewBag.TurlerBirimFiyat)
{
if (item.Musteri_ID == tbirimfiyat.Musteri_ID && tur.Tur_ID == tbirimfiyat.Tur_ID)
{
<input type="text" class="turbirimfiyat" id="turbirfiyat_@id" name="Musteri_ID" value="@tbirimfiyat.tBirim_Fiyat" />
}
}
}
<div class="col mb-1">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text bg-success">Verilen @tur.Tur_Ad</span>
<input type="number" value="0" id="verilen_@id" class="form-control turadetler_@id" name="verilen">
</div>
</div>
</div>
<div class="col mb-1">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text ml-3 bg-success">Alınan @tur.Tur_Ad</span>
<input type="number" class="form-control turadetler_@id" id="alinan_@id" name="alinan" value="0">
</div>
</div>
</div>
<div class="col mb-1">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text ml-3 bg-success">Alınan Para</span>
<input type="number" class="form-control" id="para_@id" name="para" value="0">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var birim_@id = $('#turbirfiyat_@id').val();
$(".turadetler_@id").on("keydown keyup", function() {
var sum_@id = 0;
//iterate through each textboxes and add the values
$(".turadetler_@id").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum_@id += parseFloat(this.value) * (birim_@id) //(Number(birim_@id) || 0)
$(this).css("background-color", "#FEFFB0");
} else if (this.value.length != 0) {
$(this).css("background-color", "red");
}
});
$("input#para_@id").val(sum_@id);
});
});
</script>
</div>
错误信息; jquery-3.3.1.js:8032 指定的值“NaN”不是有效数字。该值必须与以下正则表达式匹配:-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
这里我的代码没有循环;
$(document).ready(function() {
var birim= $('#turbirfiyat').val();
$(".turadetler").on("keydown keyup", function() {
var sum = 0;
$(".turadetler").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value) * birim;
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0) {
$(this).css("background-color", "red");
}
});
$("#para").val(sum.toFixed(2));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td width="40px">1</td>
<td>Number</td>
<td><input type="text" name="txt" id="turbirfiyat" value="2" /></td>
</tr>
<tr>
<td>2</td>
<td>verilen</td>
<td><input class="turadetler" type="text" name="txt" id="verilen"value="0" /></td>
</tr>
<tr>
<td>3</td>
<td>Alinan</td>
<td><input class="turadetler" type="text" name="txt" id="alinan" value="0" /></td>
</tr>
<tr id="summation">
<td colspan ="2" align="right">
Sum :
</td>
<td>
<input type="text" id='para' name="input" />
</td>
</span>
</td>
</tr>
</table>
输出 ;
<div class="row verigirisler_3" id="turdiv_3" style="">
<input type="text" class="turbirimfiyat" id="turbirfiyat_3" name="Musteri_ID" value="0,2">
<div class="col mb-1">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text bg-success">Verilen Tahinli</span>
<input type="number" value="0" id="verilen_3" class="form-control turadetler_3" name="verilen" style="background-color: rgb(254, 255, 176);">
</div>
</div>
</div>
<div class="col mb-1">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text ml-3 bg-success">Alınan Tahinli</span>
<input type="number" class="form-control turadetler_3" id="alinan_3" name="alinan" value="0" style="background-color: rgb(254, 255, 176);">
</div>
</div>
</div>
<div class="col mb-1">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text ml-3 bg-success">Alınan Para</span>
<input type="text" class="form-control" id="para_3" name="para" value="0">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var birim_3 = $('#turbirfiyat_3').val();
$(".turadetler_3").on("keydown keyup", function() {
var sum_3 = 0;
$(".turadetler_3").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum_3 += parseFloat(this.value) * birim_3; //(Number(birim_3) || 0)
$(this).css("background-color", "#FEFFB0");
} else if (this.value.length != 0) {
$(this).css("background-color", "red");
}
});
$("input#para_3").val(sum_3);
});
});
</script>
</div>
我该如何解决?
解决方案
使用$(this).val()
而不是this.value
. 不要混合使用普通 JS 和 JQuery。
$(document).ready(function () {
var birim = $("#turbirfiyat").val();
$(".turadetler").on("keydown keyup", function () {
var sum = 0;
//iterate through each textboxes and add the values
$(".turadetler").each(function () {
const val = $(this).val();
//add only if the value is number
if (!isNaN(val) && val.length != 0) {
sum += parseFloat(val) * (Number(birim) || 0);
$(this).css("background-color", "#FEFFB0");
} else if (val.length != 0) {
$(this).css("background-color", "red");
}
});
$("#para").val(sum.toFixed(2));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td width="40px">1</td>
<td>Number</td>
<td><input type="text" name="txt" id="turbirfiyat" value="2" /></td>
</tr>
<tr>
<td>2</td>
<td>verilen</td>
<td><input class="turadetler" type="text" name="txt" id="verilen" value="0" /></td>
</tr>
<tr>
<td>3</td>
<td>Alinan</td>
<td><input class="turadetler" type="text" name="txt" id="alinan" value="0" /></td>
</tr>
<tr id="summation">
<td colspan="2" align="right">
Sum :
</td>
<td>
<input type="text" id='para' name="input" />
</td>
</span>
</td>
</tr>
</table>
推荐阅读
- java - 如何获取存储在数组列表的数组列表中的对象的属性?
- typescript - NSwag:关于如何在 NSwag 工作室中使用类扩展的清晰步骤和干净示例
- javascript - 如何解决 js/jquery 文件之间的冲突?
- python - 为什么我的 Python 回文函数失败了?
- wordpress - Woocommerce - 如果数量发生变化,则显示不同的添加到购物车按钮
- arrays - 从文件创建对象并将它们存储到数组列表中。文件就像 (tools = 2000; fixTools=500 等)
- logging - 监控多个日志文件的最佳方式
- php - 在不同的数据集之间显示空白的 html 表格行
- amazon-web-services - 不了解 AWS Amplify 身份验证刷新令牌方法
- c - 如何将字符数组中的内容写入文本文件?