Javascript 创建一个公共函数，用于其他数据

我正在制作一个项目列表，并希望在数量变化时计算其值，但如何使函数通用，以便我可以将其用于所有行

你能推荐一些最好和简单的方法吗？但请记住，我只想用javascript来实现

---

您可以在

表

本身上使用事件委派，而不是使用内联处理程序（这通常被认为是非常糟糕的做法），并且如果您有一个函数处理数字更改，而不是两个，则可以使代码更加干燥。如果目标（单击的元素）与

+

按钮匹配，则使用

1

参数调用；如果目标与

-

按钮匹配，则使用

-1

参数调用。同时传递目标-通过访问按钮的

parentElement

，您可以从目标中识别相同

中关联的

数量

、

价格

和

总计

元素

在这个实现中，所有数据都存储在HTML本身中——没有持久变量，也不再需要任何ID

document.querySelector（'table'）.addEventListener（'click'，（{target}）=>{
if（target.matches（'按钮：第n个子（1）'））changeNum（target，1）；
else if（target.matches（'button:nth child（2）'））changeNum（target，-1）；
});
函数changeNum（按钮，changeBy）{
常量[，quantityElm，priceElm，totalElm]=button.parentElement.parentElement.children；
常量数量=编号（quantityElm.textContent）+变更人；
quantityElm.textContent=数量；
const price=Number（pricelm.textContent）；
施工总量=数量*价格；
totalElm.textContent=总计；
}

名称
数量
价格
全部的
项目
0
25
0
+
-
项目
0
5.
0
+
-
项目
0
5.
0
+
-

  <table>
<thead>
  <tr>
    <th>
        Name
    </th>
    <th>Quantitiy</th>
    <th>Price</th>
    <th>Total</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>item</td>
    <td id="quantity">0</td>
    <td id="price">25</td>
    <td id="total">0</td>
    <td>
       <button onclick="incrementNum();">+</button>
        <button onclick="decrementNum();">-</button>
    </td>
  </tr>
  <tr>
    <td>item</td>
    <td id="quantity2">0</td>
    <td id="price2">5</td>
    <td id="total2">0</td>
<td>
       <button onclick="incrementNum();">+</button>
        <button onclick="decrementNum();">-</button>
    </td>
  </tr>
   <tr>
    <td>item</td>
    <td id="quantity3">0</td>
    <td id="price3">5</td>
    <td id="total3">0</td>
     <td> <button onclick="incrementNum();">+</button>
  <button onclick="decrementNum();">-</button></td>
      </tr>
    </tbody>
  </table>

var quantityVal=0;
var quantity = document.querySelector("#quantity");
var total = document.querySelector("#total");
var price = document.querySelector("#price").innerHTML;
function incrementNum(){
  quantityVal++;
  quantity.innerHTML=quantityVal;
 total.innerHTML = quantity.innerHTML*price;
    }
    function decrementNum(){
  quantityVal--;
  quantity.innerHTML=quantityVal;
  total.innerHTML = quantity.innerHTML*price;
}