javascript - 如何更改多个具有相同名称的类的每个值

Question

我有一个网页，上面有一些产品，我想做的是每次用户单击删除按钮时计算新数量，但我有这么多产品，而且我使用的是相同的类名，所以我不知道如何在用户单击每个产品的特定按钮时操纵或更改数量的值

现在，当我单击删除 ( supprimer ) 按钮时，它适用于所有产品，但我希望在单击每个产品的特定按钮时更改值？

const qte = document.querySelectorAll('.qte');
const suppr = document.querySelectorAll('.suppr');

suppr.forEach(function(button) {
  button.onclick = (event => {
    for (let i = 0; i < qte.length; i++) {
      qte[i].innerText = parseInt(qte[i].innerText) - 1;
    }
  })
});

<div class="col-lg-6">
  <div class="card">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        <div class="row">
          <div class="col-md-4">
            <img src="../img/produit_newyork_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60" />
          </div>
          <div class="col-md-4">
            <p class="mb-auto">Lego Architecture</p>
            <p class="font-weight-bold">New York City</p>
            <p class="font-italic">Quantité : <span class="qte">1</span></p>
          </div>
          <div class="col-md-4">
            <h4 class="text-right prix">49,99€</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-outline-danger btn-sm float-right suppr">Supprimer <i class="fas fa-trash-alt"></i></button>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <div class="row">
          <div class="col-md-4">
            <img src="../img/produit_londres_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60" />
          </div>
          <div class="col-md-4">
            <p class="mb-auto">Lego Architecture</p>
            <p class="font-weight-bold">Londres City</p>
            <p class="font-italic">Quantité : <span class="qte">3</span></p>
          </div>
          <div class="col-md-4">
            <h4 class="text-right prix">49,99€</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-outline-danger btn-sm float-right suppr">Supprimer <i class="fas fa-trash-alt"></i></button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 1

相对寻址。使用 this.closest("container") 或 event.target.closest...

两个版本，每个按钮一个

document.querySelectorAll('.suppr').forEach(button => {
  button.onclick = (event => {
    event.preventDefault();
    const qte = event.target.closest(".list-group-item").querySelector(".qte");
    let val = qte.innerText;
    val--;
    if (val >= 0) qte.innerText = val;
  })
});

<div class="col-lg-6">
  <div class="card">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        <div class="row">
          <div class="col-md-4">
            <img src="../img/produit_newyork_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60" />
          </div>
          <div class="col-md-4">
            <p class="mb-auto">Lego Architecture</p>
            <p class="font-weight-bold">New York City</p>
            <p class="font-italic">Quantité : <span class="qte">1</span></p>
          </div>
          <div class="col-md-4">
            <h4 class="text-right prix">49,99€</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-outline-danger btn-sm float-right suppr">Supprimer <i class="fas fa-trash-alt"></i></button>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <div class="row">
          <div class="col-md-4">
            <img src="../img/produit_londres_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60" />
          </div>
          <div class="col-md-4">
            <p class="mb-auto">Lego Architecture</p>
            <p class="font-weight-bold">Londres City</p>
            <p class="font-italic">Quantité : <span class="qte">3</span></p>
          </div>
          <div class="col-md-4">
            <h4 class="text-right prix">49,99€</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-outline-danger btn-sm float-right suppr">Supprimer <i class="fas fa-trash-alt"></i></button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

替代方案是容器上的事件处理程序:

document.querySelector(".card").addEventListener("click", event => {
  const tgt = event.target;
  if (tgt.classList.contains("suppr")) {
    event.preventDefault();
    const qte = tgt.closest(".list-group-item").querySelector(".qte");
    let val = qte.innerText;
    val--;
    if (val >= 0) qte.innerText = val;
  }
});

<div class="col-lg-6">
  <div class="card">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        <div class="row">
          <div class="col-md-4">
            <img src="../img/produit_newyork_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60" />
          </div>
          <div class="col-md-4">
            <p class="mb-auto">Lego Architecture</p>
            <p class="font-weight-bold">New York City</p>
            <p class="font-italic">Quantité : <span class="qte">1</span></p>
          </div>
          <div class="col-md-4">
            <h4 class="text-right prix">49,99€</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-outline-danger btn-sm float-right suppr">Supprimer <i class="fas fa-trash-alt"></i></button>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <div class="row">
          <div class="col-md-4">
            <img src="../img/produit_londres_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60" />
          </div>
          <div class="col-md-4">
            <p class="mb-auto">Lego Architecture</p>
            <p class="font-weight-bold">Londres City</p>
            <p class="font-italic">Quantité : <span class="qte">3</span></p>
          </div>
          <div class="col-md-4">
            <h4 class="text-right prix">49,99€</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-outline-danger btn-sm float-right suppr">Supprimer <i class="fas fa-trash-alt"></i></button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>