javascript - 如何同时对多个输入乘以值求和

Question

所以，我有 This Fiddle 我有一个包含输入和成本的表。它还具有一些jquery。

$( ".total" ).change(function() {
    i = 1;
var input001 = document.getElementsByName(i)[0];
var cost001 = document.getElementById("cost" + i);
var total001 = input001.value * cost001.innerHTML;
 var num = total001;
 var total = num.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,");
  document.getElementById("printchatbox").value = total;
  i++;
});

此代码将第一个输入乘以第一个项目成本。我想找到一种方法来重复此 45 次(每个项目一次)，而无需复制并粘贴此代码 45 次...如果这是唯一的方法，我可以这样做...但我希望学到一些东西并同时使我的代码显着缩短。该表是由 php 生成的，我只是复制并粘贴了为 fiddle 生成的 html。

 while($row = $result->fetch_assoc()) {
        $row['ItemID'] = ltrim($row['ItemID'], '0');
        ?>
            <tr>
                <td><input type="number" class="total" name="<?php echo $row['ItemID']?>" value "<?= isset($_POST[$row['ItemID']]) ? htmlspecialchars($_POST[$row['ItemID']]) : "" ?>"></td>
                <td><?php echo $row['ItemID']?></td>
                <td><?php echo $row['ItemDescription']?></td>
                <td id="<?php echo 'cost' . $row['ItemID'] ?>"><?php echo $row['ItemCost']?></td>
                <td id="<?php echo 'value' . $row['ItemID'] ?>"><?php echo $row['ItemValue']?></td>
            </tr>
            <?php
            }
            ?>
            </table>

这是网站上创建表的 PHP 代码... 这是 html 表格的第一行。

<tbody><tr>
                 <td><input class="total" name="1" value="" ""="" type="number"></td>
                <td>1</td>
                <td>Barrel Wrap 47"x31"</td>
                <td id="cost1">39.38</td>
                <td id="value1">47.25</td>
            </tr>

这是表格前 10 行的图像。

如果我必须更改其中的某些内容，那完全没问题，我只是希望保持可读性并减少冗余。
谢谢

Answer 1

这是您更新的 fiddle :https://jsfiddle.net/737v3qxr/2/

所以我改变了一些事情:

$( ".total" ).change(function() {
    var name = this.name;
  var quantity = this.value;
    var cost = document.getElementById("cost" + name).innerHTML;
    var total = quantity * cost;
  items[name] = {cost, quantity}
    new_total();
});

当您将函数/监听器应用于某物时，this引用元素本身，因此您不需要对其执行额外的 i 和 i++。

我还介绍了 JSON(它基本上是任何其他语言的字典)，这有助于跟踪价格。

大部分代码只是重命名，因为您的逻辑实际上并没有太远，只是非常笨拙和复杂。

我还添加了 new_total函数，它本身并不需要是一个函数，但这只是我的偏好。

最后，我在您的总计中添加了一个 ID，以便于跟踪。

<input id="total" type="text" readonly id="printchatbox" name="total">

还有一些奇怪的空文本，我假设它们指的是您的 php，但您必须自己处理它。

<input class="total" name="45" value="" ""="" type="number">