使用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

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" onchange="extractId(event);"/> 

而且在javascript：

function extractId(event) { 
var elem = event.target; 
var myArr = elem.id.split('_'); 

var yourUnique_id = myArr[3]; 
} 

Answer 2

[].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价值}

Answer 3

如果用户添加一个新的项目，输入数量并且它应该自动计算金额 ，如何提取唯一的 ID标识符以更改值o f的金额？

您可以使用input事件; for循环;属性包含选择器[attributeName*=containsString]，.nextElementSibling，.previousElementSibling，总结含有"quantity"和含有"rate"id并设置结果的id值在id含有"amount"

function calculate() { 
 
    this.parentElement.querySelector("[id*=amount]") 
 
    .value = +this.value 
 
     + +(/quantity/.test(this.id) 
 
      ? this.nextElementSibling 
 
      : this.previousElementSibling 
 
     ).value 
 
} 
 

 
var elems = document.querySelectorAll("[id*=quantity], [id*=rate]"); 
 
for (var i = 0; i < elems.length; i++) { 
 
    calculate.call(elems[i]); elems[i].oninput = calculate; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_quantity" value="1" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_rate" value="2" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_amount" /> 
 
</div> 
 
<div> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786867_quantity" value="3" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786867_rate" value="4" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786867_amount" /> 
 
</div>

Answer 4

为了能够向新添加的输入控制响应，您需要在某个父元素上捕获change事件，否则您不会将更改捕获到新添加的元素上。

以下是处理文档上更改事件的一些代码。作为本次活动冒泡，它最终会到达那里，所以我们可以对此作出回应：

用以从输入的ID数，我们可以使用正则表达式：

document.onchange = function(e) { 
 
    var match = e.target.id.match(/^(list_item_attributes_.*?_)(rate|quantity)$/); 
 
    if (!match) return; // not rate or quantity 
 
    // read rate and quantity for same ID number: 
 
    var rate = +document.querySelector('#' + match[1] + 'rate').value; 
 
    var quantity = +document.querySelector('#' + match[1] + 'quantity').value; 
 
    // write product as amount: 
 
    document.querySelector('#' + match[1] + 'amount').value = rate*quantity; 
 
}

Quantity: <input class="form-control" type="text" id="list_item_attributes_19786868_quantity" /><br> 
 
Rate: <input class="form-control" type="text" id="list_item_attributes_19786868_rate" /><br> 
 
Amount: <input class="form-control" type="text" id="list_item_attributes_19786868_amount" /><br> 
 
<p> 
 
Quantity: <input class="form-control" type="text" id="list_item_attributes_14981684_quantity" /><br> 
 
Rate: <input class="form-control" type="text" id="list_item_attributes_14981684_rate" /><br> 
 
Amount: <input class="form-control" type="text" id="list_item_attributes_14981684_amount" /><br>

由于您要求回复change事件，所以我保留这种方式，但您可能有兴趣使用input事件，只要输入中的任何字符发生更改就会触发该事件。

以上示例不保护输入的amount字段。你应该做些什么，因为用户可能会覆盖计算结果。

Answer 5

document.querySelector(".my-form").addEventListener("change", function(e) { 
 

 
    var changed = e.target; 
 
    var matchedId = changed.id.match(/^(list_item_attributes_[^_]*)_/); 
 
    if (!matchedId) { 
 
    // this isn't one of the relevant fields 
 
    return; 
 
    } 
 
    var uniquePrefix = matchedId[1]; 
 
    var quantity = document.querySelector("#" + uniquePrefix + "_quantity"); 
 
    var rate = document.querySelector("#" + uniquePrefix + "_rate"); 
 
    var amount = document.querySelector("#" + uniquePrefix + "_amount"); 
 
    var newVal = quantity.value * rate.value; 
 
    if (isNaN(quantity.value) || isNaN(rate.value) || isNaN(newVal)) { 
 

 
    amount.value = ""; 
 

 
    } else { 
 

 
    amount.value = newVal; 
 

 
    } 
 

 
});

<form class="my-form"> 
 
    <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" /> 
 
</form>