创建一个通用函数以将其用于其他数据 [英] Create a common function to use same for other data

问题描述

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

I am making a list of item and want to calculate its value as quantity change, but how to make the function common so that I can use it for all row?

您能提出一些最佳和简便的方法，但请记住我只想通过 javascript 来做到这一点。

Can you suggest some best and easy ways but remember I want to do it by javascript only.

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

推荐答案

而不是使用内联处理程序（这通常被认为是非常糟糕的做法），您可以在表本身上使用事件委托，如果有，则可以保留代码DRY-er 函数来处理数字更改，而不是两个。如果目标（单击的元素）与 + 按钮匹配，请使用参数 1 进行调用，如果目标匹配-按钮，并使用 -1 参数进行调用。同时传递目标-从中可以确定关联的数量，价格和通过访问按钮的 parentElement 来在同一< tr> 中的总计个元素

Rather than using inline handlers (which are generally considered to be pretty bad practice), you can use event delegation on the table itself, and you can keep your code DRY-er if you have a single function that handles number changes, rather than two. If the target (the clicked element) matches a + button, call with a parameter of 1, and if the target matches a - button, call with a parameter of -1. Also pass the target - from it, you can identify the associated quantity, price, and total elements in the same <tr> by accessing the parentElements of the button.

通过此实现，所有数据都存储在HTML本身中-没有持久变量，也不再需要任何ID。

With this implementation, all the data is stored in the HTML itself - there are no persistent variables, and there's no need for any IDs anymore.

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>

这篇关于创建一个通用函数以将其用于其他数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！