事件侦听器循环的数组索引 link

Question

我正在尝试简化/重构多种产品的价格计算。

代码演示：https://jsfiddle.net/helloKittychan/jLfwgsz6/2/

结构：

价格：存储在数组中 [0] [1]。
数量：用户输入每个产品的整数。
小计计算：在'blur'（用户输入）*（对应数组[n]).

问题

第一个产品 Candy1 可以很好地计算小计，因为我对变量进行了硬编码。然后我开始使用 'blur' 事件侦听器循环为 Candy1 和 Candy 2 的数量输入字段重构代码。事件侦听器在数量字段上工作正常，但现在我不知道如何调用相应的当前事件的价格值。我想直接从数组调用或从 HTML 元素调用是可能的，但我无法弄清楚精确定位与当前事件对应的正确价格的逻辑，或者不确定这是否可能。

之前的研究

我浏览了一些 post 页面，但其中 none 看起来不够简单也不够相似，我无法将其综合到我的代码中。

这个看得见的效果和（我觉得）我想要的差不多，但是逻辑上不是。 按索引访问子数组并在索引递增时更新视图 (SO post)
逻辑上相似但HTML结构不同：Get value from select list in JS (SO post)
我看了页面底部的[数组和循环]部分，但我不知道如何使用它。 Javascript 数组（来自 Home and Learn 网站）
堆栈溢出search keywords js array select index

问题

鉴于我是新手，我尝试重构是否过于雄心勃勃？
或者你能建议一个简单的解决方案/给我指点相关参考吗？（最好是纯js，尽可能不要库）

我也怀疑我的 HTML 设计效率低下。任何使我的小项目成功的建议都将不胜感激。

代码演示：https://jsfiddle.net/helloKittychan/jLfwgsz6/2/

仅限 Js：

// Inserting prod prices
var prodPrices = ["0.33", "0.50"];
document.getElementById("prod1").innerHTML = "£&nbsp;" + prodPrices[0];
document.getElementById("prod2").innerHTML = "£&nbsp;" + prodPrices[1];

// Setting up a universal Event Listener
document.addEventListener("DOMContentLoaded", 
function() { 

// grabbing (=var) the common Class name within the target block.
var qtyInput =
document.getElementsByClassName("qty-input");

// event listener = counting the number of grabbed Class occurrence (=array) 
// and listening to a defined event (click/blur etc) on them + define event name.
for(var i = 0; i < qtyInput.length; ++i) {
qtyInput[i].addEventListener("blur", gotQty);

}

// Function to identify current element with event.
function gotQty(event) {
var qtyId = this.value;
var bow = qtyId * prodPrices[0];
console.log(qtyId); 
console.log(bow);   
}
});

// Calculating subtotal (qty * price) - currently only works for "Candy 1".
function subTot() {
var prod1Qty = document.getElementById("qtyFlat1").value; //this
var subTotProd1 = prod1Qty * prodPrices[0];
var subTotClean = subTotProd1.toFixed(2);
        document.getElementById("prod1-subtotal").innerHTML = subTotClean;
// condescending health warning
if (prod1Qty > 10 ) {
    document.getElementById("quantity-alert").innerHTML = "Too much sugar is bad for you.<br>Select between 1 ~ 10.";
    return false;
}else{
        return true;
}
}
subTot();
// Clearing invalid data & error message then resetting the sub tot - currently only works for "Candy 1".
function clearSub() {
var prod1QtyOver = document.getElementById("qtyFlat1").value;
if(prod1QtyOver > 10){
    document.getElementById("quantity-alert").innerHTML = "<br><br>";
    document.getElementById("qtyFlat1").value = "";
    document.getElementById("prod1-subtotal").innerHTML = prodPrices[0];
}
}
clearSub();

Answer 1

如果我动态生成字段，我会使用 data- 属性并将该属性设置为项目的值。当用户点击字段外时，JS 可以访问它。

例如：在字段中，添加另一个属性 data-price 分别设置为商品价格（这涉及一些 DOM 操作）。

...
<input class="qty-input" data-price="0.33" id="qtyFlat1" type="text" placeholder="1" class="qty" style="width: 30px;" maxlength="4" onblur="subTot()" onclick="clearSub()" onkeypress=""/>
...
<input class="qty-input" data-price="0.5" id="qtyFlat2" type="text" placeholder="1" class="qty" style="width: 30px;" maxlength="4" onblur="subTot()" onclick="clearSub()" onkeypress=""/>
...

在javascript中：

function gotQty(event) {
  var qtyId = this.value;
  var bow = qtyId * Number(event.srcElement.dataset.price);
  console.log(qtyId);   
  console.log(bow);
}

查看 http://jsfiddle.net/boo261cc/3 并打开您的控制台。

事件侦听器循环的数组索引 link

Array index link to event listener loop

javascript

arrays

dom-events