Question

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

您能提出一些最佳和简便的方法吗，但请记住，我只想使用 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;
}

Answer 1

您可以在startActivity()本身上使用事件委托，而不是使用内联处理程序（通常认为这是非常糟糕的做法），并且如果您有，则可以保留代码DRY-er一个功能来处理数字更改，而不是两个。如果目标（单击的元素）与table按钮匹配，请使用参数+进行调用，如果目标与1按钮匹配，请使用参数{{1}进行调用}。同时传递目标-从中，您可以通过访问以下对象的-来识别同一-1中的关联quantity，price和total元素按钮。

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

<tr>

parentElement

创建一个通用函数以将其用于其他数据

1 个答案: