javascript - 使用 Javascript 提取唯一元素 ID

Question

好的，所以我有一个表单，它将一个项目添加到项目列表中并用它进行计算，但是添加的每个新项目都是在用户端完成的，然后提交到服务器进行验证和更新数据库。现在，我查看了其他答案，但无法真正得到答案。如果用户添加一个新商品并输入数量和费率，它应该自动计算金额，如何提取唯一 ID 标识符来更改金额值？下面的代码，在本例中，唯一标识符是 19786868。该标识符的长度总是不同的，并且它们没有唯一的模式，长度和值是由随机命令生成的。

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" />
<input class="form-control" type="text" id="list_item_attributes_19786868_rate" />
<input class="form-control" type="text" id="list_item_attributes_19786868_amount" />

如何使用 JavaScript 中的 OnChange 命令提取此唯一标识符来计算金额值？

Answer 1

[].forEach.call(document.querySelectorAll(".form-control"), function(el) {

  var id = el.id.replace(/\D+/g,"");
  console.log( id );       // "19786868"

});

所以基本上使用 this.id.replace(/\D+/g,"") ，其中所有非数字 \D 都被 ""替换

这是一个使用input事件的示例:

[].forEach.call(document.querySelectorAll(".form-control"), function(el) {

  el.addEventListener("input", function() {
    var id = this.id.replace(/\D+/g,"");
    alert( id );
  }, false)

});

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" />
<input class="form-control" type="text" id="list_item_attributes_123_foobar" />

_{请注意:asd_123_foo_9 将返回 1239 作为结果，因此请确保始终将 asd_123_foo 作为 ID 值}