Question

新手在这里。我正在尝试简化/重新计算多个产品的价格计算。

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

结构

价格：以[0] [1]的形式存储在数组中。
数量：每种产品的用户输入整数。
小计算：关于'模糊'（用户输入）*（对应阵列[N]）。

问题

第一个产品Candy1可以很好地计算子总数作为硬编码变量。然后我开始使用'blur'事件监听器循环对Candy1＆amp;的数量输入字段重新分解代码。 Candy 2.事件监听器在数量字段上工作正常，但现在我仍然坚持如何为当前事件调用相应的价格值。我想无论是直接从数组调用还是从HTML元素调用都是可能的，但我无法找出逻辑来确定与当前事件相对应的合适价格，或者不确定是否可能。

以前的研究

我环顾了一些帖子＆amp;页面，但它们似乎都不够简单，也不足以让我合成到我的代码中。

这可见效果类似于（我认为）我想要的，但逻辑不是。 按索引访问子数组并在索引递增时更新视图（SO post）
逻辑上相似但HTML结构不同：从JS中的选择列表中获取值（SO帖子）
我查看了页面底部的[Arrays and Loops]部分，但我无法理解如何使用它。 Javascript阵列（由Home and Learn网站提供）
StackOverflow 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并打开您的控制台。

数组索引链接到事件侦听器循环

1 个答案: