大佬教程收集整理的这篇文章主要介绍了用 ID 名称中的后续数字重写 JavaScript 代码，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试将函数应用于 ID 包含后续数字（即 price1、price2、price3）等的输入字段。
为开始定义的第一行字段没有问题。但是进一步的输入字段是由 jquery 函数动态添加的，并且它们的数量是事先未知的。
我希望这将是一个简单的循环应用：
var i=1;
$("#quantity"+i).keyup(function() {
var price= $("#price"+i).val();
var quantity= $(this).val();
var value= price*quantity;
var value=value.toFixed(2); /* rounding the value to two digits after period */
value=value.toString().replace(/\./g,',') /* converTing periods to commas */
$("#value"+i).val(value);
});
到目前为止一切顺利 - 填充“数量”字段后，乘法结果正确显示在 ID="value1" 字段中。
现在更多的字段应该遵循模式并在输入数量时计算值 - 像这样：
[price2] * [quantity2] = [value2]
[price3] * [quantity3] = [value3]
等
所以代码如下：
$('#add_fIEld').click(function(){ /* do the math after another row of fIElds is added */
var allfIElds=$('[ID^="quantity"]');
var limit=(allfIElds.length); /* count all fIElds where ID starts with "quantity" - for the loop */
for (var count = 2; count < limit; count++) { /* starTing value is Now 2 */
$("#quantity"+count).keyup(function() {
var cena = $("#price"+count).val();
var quantity= $("#quantity"+count).val();
var value= price*quantity;
var value=value.toFixed(2);
value=value.toString().replace(/\./g,')
$("#value"+count).val(value);
});
}
});
问题是所有进一步的“值”字段仅在（重新）输入“quantity2”时计算，而“value2”根本不计算。
我猜在处理字段和/或触发计算时出错了。
我应该如何更正代码？
以防万一需要“add_fIEld”函数来解决问题：
$(document).ready(function(){
var i=1;
$('#add_fIEld').click(function(){
i++;
$('#offer').append('<tr ID="row'+i+'">
<td><input type="text" name="prod_num[]" ID="prod_num'+i+'" placeholder="Product number (6 digits)"></td><td><input type="text" name="prod_name[]" Disabled></td>
<td><input type="text" name="cena[]" ID="price'+i+'" placeholder="Enter your price"></td>
<td><input type="text" name="quantitY[]" ID="quantity'+i+'" placeholder="Enter quantity"></td>
<td><input type="text" name="value[]" ID="value'+i+'" Disabled></td>
<td><button type="button" name="remove_fIEld" ID="'+i+'" class="button_remove">X</button></td></tr>');
});
增加 ID 比它的价值要麻烦得多，尤其是当您开始删除和添加行时。
这一切都可以使用通用类并在特定行实例中遍历来完成。
要考虑未来的行，请使用事件委托。
简化示例：
// store a row copy on page load
const $storedRow = $('#myTable tr').first().clone()
// delegate event listener to peRMANent ancestor
$('#myTable').on('input','.qty,.price',function(){
const $row = $(this).closest('tr'),price = $row.find('.price').val(),qty = $row.find('.qty').val();
$row.find('.@R_719_10586@l').val(price*qty)
});
$('button').click(function(){
// insert a copy of the stored row
// delegated events will work seamlessly on new rows also
const $newRow = $storedRow.clone();
const prodName = 'Product XYZ';// get real value from user input
$newRow.find('.prod-name').text(prodName)//
$('#myTable').append($newRow)
})<script src="https://cdnjs.cloudFlare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add row</button>
<table id="myTable">
<tr>
<td class="prod-name">Product 1</td>
<td>Qty:<input type="number" class="qty" value="0"></td>
<td>Price:<input type="number" class="price" value="0"></td>
<td>@R_719_10586@l:<input type="text" class="@R_719_10586@l" value="0" readonly></td>
</tr>
<tr>
<td class="prod-name">Product 2</td>
<td>Qty:<input type="number" class="qty" value="0"></td>
<td>Price:<input type="number" class="price" value="0"></td>
<td>@R_719_10586@l:<input type="text" class="@R_719_10586@l" value="0" readonly></td>
</tr>
</table>
Understanding Event Delegation
,var count = $("input").length;
如果有，这里的值为 1。如果有四个，则值为 4。
您还可以使用 .each() 选项来迭代选择器中的每个项目。
$('#add_field').click(function(){
var allFields = $('[id^="quantity"]');
allFields.each(function(i,el){
var c = i + 1;
$(el).keyup(function() {
var price = parseFloat($("#price" + C).val());
var quantity = parseInt($(el).val());
var value = price * quantity;
value = value.toFixed(2);
value = value.toString().replace(/\./g,',');
$("#value" + C).val(value);
});
});
});
您也可以根据 ID 本身创建关系。
$(function() {
function calc@R_719_10586@l(price,qnty) {
return (parseFloat(pricE) * parseInt(qnty)).toFixed(2);
}
$('#add_field').click(function() {
var rowClone = $("#row-1").clone(true);
var c = $("tbody tr[id^='row']").length + 1;
rowClone.attr("id","row-" + c);
$("input:eq(0)",rowClonE).val("").attr("id","prod_num-" + c);
$("input:eq(1)","price-" + c);
$("input:eq(2)","quantity-" + c);
$("input:eq(3)","value-" + c);
$("button",rowClonE).attr("id","remove-" + c);
rowClone.appendTo("table tbody");
});
$("table tbody").on("keyup","[id^='quantity']",function(E) {
var $self = $(this);
var id = $self.attr("id").substr(-1);
if ($("#price-" + id).val() != "" && $self.val() != "") {
$("#value-" + id).val(calc@R_719_10586@l($("#price-" + id).val(),$self.val()));
}
});
});<script src="https://cdnjs.cloudFlare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add_field">Add Field</button>
<br />
<h2>Product</h2>
<table>
<thead>
<tr>
<td>number</td>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>@R_719_10586@l</td>
<td></td>
</thead>
<tbody>
<tr id="row-1">
<td><input type="text" name="prod_num[]" id="prod_num-1" placeholder="Product number (6 digits)"></td>
<td><input type="text" name="prod_name[]" disabled></td>
<td><input type="text" name="cena[]" id="price-1" placeholder="Enter your price"></td>
<td><input type="text" name="quantitY[]" id="quantity-1" placeholder="Enter quantity"></td>
<td><input type="text" name="value[]" id="value-1" disabled></td>
<td><button type="button" name="remove_field" id="remove-1" class="button_remove">X</button></td>
</tr>
</tbody>
</table>以上是大佬教程为你收集整理的用 ID 名称中的后续数字重写 JavaScript 代码全部内容，希望文章能够帮你解决用 ID 名称中的后续数字重写 JavaScript 代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。