Question

假设我有一个HTML代码：

<li>
    <button class="add">+</button>
    <span class="amount">0</span>
    <button class="substract">-</button>
</li>
<li>
    <button class="add">+</button>
    <span class="amount">0</span>
    <button class="substract">-</button>
</li>
and so on...

和JS：

  function addAmount(el) {
    let amount = document.querySelector(".amount");
    let addAmount = parseInt(amount.innerHTML);
    if (el.classList.contains("add")) {
      addAmount = addAmount + 1;
      amount.innerHTML = addAmount;
    }
    return addAmount;
  }

    document.addEventListener("click", e => {
  addAmount(e.target);
});

此代码仅适用于第一个li元素。我想知道如何获取这样的代码，其中每个li元素中的每个按钮仅负责一个元素（一个按钮为一个li元素增加值）。

Answer 1

您根本不应该搜索文档。您可以使用document.querySelectorAll(".amount")获取所有amount字段的列表，但是您需要弄清楚要使用哪个索引。

相反，您可以使用previousElementSibling或nextElementSibling来获取单击按钮之前或之后的元素。

function addAmount(el) {
  let amountElement, adjustAmount
  if (el.classList.contains("add")) {
    adjustAmount = 1;
    amountElement = el.nextElementSibling;
  } else {
    adjustAmount = -1;
    amountElement = el.previousElementSibling;
  }
  amountElement.innerText = parseInt(amountElement.innerText) + adjustAmount;
}

document.addEventListener("click", e => {
  addAmount(e.target);
});

<li>
  <button class="add">+</button>
  <span class="amount">0</span>
  <button class="substract">-</button>
</li>
<li>
  <button class="add">+</button>
  <span class="amount">0</span>
  <button class="substract">-</button>
</li>

更改项目列表中的内部值

1 个答案: