javascript - 将代码放在我的 Javascript 数组中

Question

我有以下问题，

我制作了一个包含大量输入字段的表单。如果用户键入 1，它会立即在其旁边显示价格。我的代码是这样的:

var priceMargherita = 7;
    var numPizzaMargheritaInput = document.getElementById('countMargherita');
    var priceMargheritaLabel    = document.getElementById('totalMargherita');

    function onNumPizzaMargheritaInputChange(e){

        var totalMargherita = priceMargherita * parseInt(e.target.value);
        var formattedPrice = '\u20ac '+totalMargherita.toFixed(2);

        priceMargheritaLabel.innerHTML = '';
        priceMargheritaLabel.appendChild(document.createTextNode(formattedPrice));
    }
    numPizzaMargheritaInput.addEventListener('change', onNumPizzaMargheritaInputChange, false);

它的价格是这样的:

<td>Pizza Margherita</td>
<td><input type="number" id="countMargherita" class="formnumbers" name="PizzaMargherita" onChange="validateForm(this)" min="1" max="99"/></td>
<td><span id="totalMargherita"></span></td>

现在我的问题是我有 11 种像这种 Pizza Margherita 的产品。目前我有 11 段代码，如上面的代码。我认为这可以在数组中完成，因为唯一改变的是一些名称。

如果我错了请纠正我，因为我在 JS 和数组方面都没有经验。

非常感谢任何帮助!

Answer 1

对我来说，最简单的方法是不使用数组或 ID。

如果可以更改html，则应将价格添加为数据属性，然后就可以拥有通用代码:

<td>Pizza Margherita</td>
<td><input type="number" class="formnumbers" name="PizzaMargherita"
           onChange="changeTotalFromCount(this)" min="1"
           max="99" data-unitPrice="7" /></td>
<td></td>

JS:

function changeTotalFromCount(input) {
    var unitPrice = parseFloat(input.getAttribute("data-unitPrice"));
    var count = input.value;

    var price = unitPrice * count;
    var formattedPrice = '\u20ac ' + price.toFixed(2);

    var label = input.parentNode.nextElementSibling;
    label.innerHTML = '';
    label.appendChild(document.createTextNode(formattedPrice));
}