我正在制作一个项目列表,并希望根据数量变化计算其值(value),但是如何使该函数通用以便我可以将它用于所有行?
你能推荐一些最好和最简单的方法吗,但请记住,我只想通过 javascript 来完成。
<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;
}
最佳答案
您可以在 table
上使用事件委托(delegate),而不是使用内联处理程序(这通常被认为是非常糟糕的做法)本身,如果你有一个单个函数来处理数字变化,而不是两个,你可以让你的代码保持干燥。如果目标(被点击的元素)匹配 +
按钮,调用参数 1
, 如果目标匹配-
按钮,调用参数 -1
.同时传递目标 - 从中,您可以识别关联的 quantity
, price
, 和 total
相同的元素 <tr>
通过访问 parentElement
按钮的 s。
通过此实现,所有数据都存储在 HTML 本身中 - 没有持久变量,也不再需要任何 ID。
document.querySelector('table').addEventListener('click', ({ target }) => {
if (target.matches('button:nth-child(1)')) changeNum(target, 1);
else if (target.matches('button:nth-child(2)')) changeNum(target, -1);
});
function changeNum(button, changeBy) {
const [, quantityElm, priceElm, totalElm] = button.parentElement.parentElement.children;
const quantity = Number(quantityElm.textContent) + changeBy;
quantityElm.textContent = quantity;
const price = Number(priceElm.textContent);
const total = quantity * price;
totalElm.textContent = total;
}
<table>
<thead>
<tr>
<th>
Name
</th>
<th>Quantitiy</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>0</td>
<td>25</td>
<td>0</td>
<td>
<button>+</button>
<button>-</button>
</td>
</tr>
<tr>
<td>item</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>
<button>+</button>
<button>-</button>
</td>
</tr>
<tr>
<td>item</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td> <button>+</button>
<button>-</button></td>
</tr>
</tbody>
</table>
关于javascript - 创建一个通用函数以将其用于其他数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52125273/