主页 / 问题 / 850573
Accepted
orel-22
Asked:2020-07-05 18:08:14 +0000 UTC2020-07-05 18:08:14 +0000 UTC

如何将一个JS计数器连接到多个产品？

  • 772

网上商店有几种产品。每个人都应该有一个所选号码的计数器。从数据库中卸载货物后，所有的类和标识符都重复了，我只能与一个柜台进行交互。
如何让每个产品都有一个工作计数器？
PS请在纯JS中提出解决方案。

var plus = document.querySelectorAll ('.plus');
var minus = document.querySelectorAll('.minus');
var number = document.querySelectorAll('.number');
var i = 0;

plus[i].onclick = up;
function up() {
  var count = Number(number[i].innerHTML);
  number[i].innerHTML = count += 1;
}
minus[i].onclick = down;
function down() {
  var count = Number(number[i].innerHTML);
  number[i].innerHTML = count -= 1;	
}
<div class="count">
  <div class="minus" id="minus">
    -
  </div>
  <div class="number" id="number">
    1
  </div>
  <div class="plus" id="plus">
    +
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    您可以遍历所有块.count并在特定块中添加点击处理程序：

    function addHandlers(count) {
  var minus = count.querySelector(".minus");
  var number = count.querySelector(".number");
  var plus = count.querySelector(".plus");
  plus.addEventListener("click", function() {
    number.innerText++;
  });
  minus.addEventListener("click", function() {
    number.innerText--;
  });
}

var counts = document.querySelectorAll(".count");
counts.forEach(addHandlers);
    .minus, .number, .plus {
  display: inline;
}
    <div class="count">
  <div class="minus">-</div>
  <div class="number">1</div>
  <div class="plus">+</div>
</div>
<div class="count">
  <div class="minus">-</div>
  <div class="number">1</div>
  <div class="plus">+</div>
</div>
<div class="count">
  <div class="minus">-</div>
  <div class="number">1</div>
  <div class="plus">+</div>
</div>

    项目 ID 必须是唯一的。在这种情况下，很可能只使用类，因此在这里放弃使用 id 可能是值得的

    • 5

相关问题