Question

我想列出一个成分列表，并可以通过单击“加号”按钮来增加成分数量。

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

TransactionDate UserId StatusDesc 2018-12-02 00:00:01.957 Cesarmartinez1795@gmail.com Rejected 2018-12-02 00:00:14.907 Cesarmartinez1795@gmail.com Success 2018-13-02 00:00:22.390 Cesarmartinez1795@gmail.com Success 2018-13-02 00:00:28.610 Cesarmartinez1795@gmail.com Rejected 2018-14-02 00:00:22.390 ssunlife@gmail.com Success 2018-14-02 00:00:28.610 ssunlife@gmail.com Rejected

            TransactionDate                 UserId                      StatusDesc
            2018-13-02 00:00:22.390     Cesarmartinez1795@gmail.com     Success
            2018-14-02 00:00:22.390     ssunlife@gmail.com              Success

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>

Answer 1

在原始代码中，必须查询每个按钮同级元素以增加它们。在此解决方案中，您可以遍历所有.ingr节点，并通过在它们上调用Ingredientize将功能应用于它们及其子级。我已经扩展了logic / 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>

Answer 2

由span返回并在第2行分配给变量document.querySelector('span')的{{1}}是文档中的第一个num。 span函数中第8行上对num的引用是对第一个increase的引用。如果您想更改span，它是单击的span的兄弟姐妹，则可以通过将button函数中的按钮称为{{ 1}}：

span

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

2 个答案: