Question

So, I have This Fiddle where I have a table that has an input and a cost. It also has a bit of 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++;
});

This code multiplies the first input times the first Item Cost. I would like to find a way to repeat this 45 times (one for each item) without copy and pasting this code 45 times... If that is the only way to do it, I can do that... but I'm hoping to learn something and make my code significantly shorter at the same time. This table is generated by php, I just copied and pasted the html that was generated for the fiddle.

 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>

this is the PHP code on the website that creates the table... this is the first row of the html table.

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

and here is an image of the first 10 rows of the table.

if I have to change something in there, that is totally fine, I'm just hoping to keep the readability and reduce the redundancy.
Thanks

Answer 1

以下是您更新的小提琴：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">

Answer 2

您也可以使用事件处理程序参数：

$( ".total" ).change(function(e) {
    var cost001 = document.getElementById("cost" + e.target.name);
    var total001 = e.target.valueAsNumber * Number(cost001.innerHTML);
    var prev = Number(document.getElementById("printchatbox").value);
  document.getElementById("printchatbox").value = total001 + prev;
});

How to sum up multiple Inputs multiplied by value simultaneously

2 个答案: