如何将事件处理程序附加到当前事件

Question

我想列出成分列表，并通过单击"加号"按钮来增加成分的数量。

现在发生的事情是，当我点击第二种成分的加号按钮时，第一种成分的数量会增加。

HTML

<div>
    <div class="ingr"><button>+</button><p><span>1</span> thea spoon(s) of sugar</p>
    </div>
    <div class="ingr"><button>+</button><p><span>2</span> courgettes</p>
    </div>
</div>

JavaScript

let buttons = document.querySelectorAll('button');
let num = document.querySelector('span');
var count = 0;
const increase = function(event) {
  count++;
  num.innerHTML = count;
}
for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = increase;
}

Answer 1

由 document.querySelector('span') 返回并分配给第 2 行变量num的span是文档中的第一个span。increase函数中对第 8 行num的引用是对第一个span的引用。如果要更改作为所单击button的同级span，可以通过引用increase函数中的按钮作为event.target来选择该span：

let buttons = document.querySelectorAll('button');
const increase = function(event) {
  var buttonParentDiv = event.target.parentNode;
  var buttonSiblingSpan = buttonParentDiv.querySelector("span");
  buttonSiblingSpan.innerHTML++
}
for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = increase;
}

Answer 2

在您的原始代码中，必须查询每个按钮同级元素以增加它们将是繁琐的。在此解决方案中，您可以遍历所有.ingr节点，并通过对它们调用 Ingredientize 来将功能应用于它们及其子节点。我已经扩展了逻辑/html来处理减少数量。

function Ingredientize (el) {
  const Incrementor = el.querySelector('button.incrementor')
  const Decrementor = el.querySelector('button.decrementor')
  const QuantityElement = el.querySelector('span')
  
  const renderQuantity = value => QuantityElement.innerHTML = value
  
  let quantity = +QuantityElement.innerHTML || 0
  
  Incrementor.addEventListener('click', () => renderQuantity(++quantity) )
  Decrementor.addEventListener('click', () => renderQuantity(--quantity) )
}
const ingredients = document.querySelectorAll('.ingr')
ingredients.forEach(ingredientElement => Ingredientize(ingredientElement))

<div>
    <div class="ingr">
      <button class="incrementor">+</button>
      <button class="decrementor">-</button>
      <p>
        <span>1</span> thea spoon(s) of sugar
      </p>
    </div>
    <div class="ingr">
      <button class="incrementor">+</button>
      <button class="decrementor">-</button>
      <p>
        <span>2</span> courgettes
      </p>
    </div>
</div>