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