使用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);
});
}
});

$（“#添加_字段”）。单击（函数（）{/*在添加另一行字段后进行计算*/
var allfields=$（'[id^=“数量”]'）；
var limit=（allfields.length）；/*计算循环中id以“数量”开头的所有字段*/
对于（var count=2；count

问题是，所有进一步的“值”字段仅在（重新）输入“quantity2”时计算，而“值2”根本不计算

我猜在寻址字段和/或触发计算时出错了

我应该如何更正代码

以防需要“添加字段”功能来解决问题：

     $(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>');
      });

$（文档）.ready（函数（）{
var i=1；
$（“#添加_字段”）。单击（函数（）{
i++；
$（'#offer'）。附加（'
X'）；
});
 >P>首先要考虑的是，可以得到选择器的长度>代码>，例如：

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本身创建关系


$（函数（）{
功能计算器（价格，qnty）{
返回（parseFloat（price）*parseInt（qnty））.toFixed（2）；
}
$（“#添加_字段”）。单击（函数（）{
var rowClone=$（“#row-1”）.clone（true）；
var c=$（“tbody tr[id^='row']）。长度+1；
rowClone.attr（“id”，“row-”+c）；
$（“输入：eq（0）”，rowClone.val（“”）.attr（“id”，“prod_num-”+c）；
$（“输入：eq（1）”，rowClone.val（“”）.attr（“id”，“price-”+c）；
$（“输入：等式（2）”，行克隆）.val（“”）.attr（“id”，“数量-”+c）；
$（“输入：eq（3）”，rowClone.val（“”）.attr（“id”，“value-”+c）；
$（“按钮”，行克隆）.attr（“id”，“删除-”+c）；
rowClone.appendTo（“表tbody”）；
});
$（“表tbody”）。在（“键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键{
var$self=$（本）；
var id=$self.attr（“id”）.substr（-1）；
如果（$（“#price-”+id）.val（）！=”&&&&$self.val（）！=”）{
$（“#value-”+id）.val（calcTotal（$（“#price-”+id）.val（），$self.val（））；
}
});
})；

添加字段


产品
数
名称
价格
量
全部的
X
增加ID的麻烦要多得多，尤其是当您开始删除行并添加行时

这一切都可以使用公共类和特定行实例中的遍历来完成

要考虑将来的行，请使用事件委派

简化示例：


//在页面加载时存储行副本
const$storedRow=$（'#myTable tr'）.first（）.clone（）
//将事件侦听器委托给永久祖先
$（'#myTable'）。在（'input'，'qty'，price'，函数（）上{
const$row=$（this）.closest（'tr'），
price=$row.find（'.price'）.val（），
数量=$row.find（'.qty'）.val（）；
$row.find（'.total'）.val（价格*数量）
});
$（“按钮”）。单击（函数（）{
//插入存储行的副本
//委派的事件也将在新行上无缝工作
const$newRow=$storedRow.clone（）；
常量prodName='Product XYZ'；//从用户输入中获取实际值
$newRow.find（'.prod name'）.text（prodName）//
$（'#myTable'）。追加（$newRow）
})

添加行
产品1
数量：
价格：
总数：
产品2
数量：
价格：
总数：
欢迎使用Stack Overflow。请提供一个最小的、可重复的示例：您可能还想参观一下：
id
s与动态创建的元素一起使用很难使用，而且容易出错。您可以利用表的结构来代替…您甚至可以使用类来代替：应用相同的类对于您想要给出编号ID的元素，您可以通过类循环元素，也可以访问具有类的第n个元素。感谢您的努力，但此代码有一些错误，就最终结果而言，它与我所获得的结果相差不远。如果您再添加行，则计算是错误的…Char谎言，非常感谢！很有魅力！：-）