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>

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

1 个答案: