如何使用事件委托增加输入的价值

Question

我正在构建一个购物车页面，其中可以增加数量。基于页面的UI设计，我默认不能使用input number type自带的默认增减箭头。

我能够通过使用 SVG 箭头和样式来实现它。

这是我的代码的方式

{% for item in cart.items %}

...
        <div  class="cart-quantity-page">
          <input type="number" name="updates[]" id="updates_{{ item.key }}" class="Quantity" value="{{ item.quantity }}"
            min="1" step="1">
            <div class="arrow-cart">
              <div class="arrowtopcart">
                <svg xmlns="http://www.w3.org/2000/svg" width="10.439" height="10.439" viewBox="0 0 10.439 10.439">
                <path id="Path_36640" data-name="Path 36640" d="M7.381,0V7.381H0Z" transform="translate(5.219 10.439) rotate(-135)" fill="#5e00dd"/>
                </svg>
              </div>
              <div class="arrowbtncart">
                <svg xmlns="http://www.w3.org/2000/svg" width="10.439" height="10.439" viewBox="0 0 10.439 10.439">
                  <path id="Path_36641" data-name="Path 36641" d="M7.381,0V7.381H0Z" transform="translate(5.219) rotate(45)" fill="#5e00dd"/>
                </svg>                
              </div>                            
            </div>
        </div>
...
{% endfor %}

由于cart-quantity-page 循环多个项目，每个输入的输入的id 不同

我尝试使用事件委托来获取输入 id，它可以工作，但是当我点击输入本身时

let cartqty = document.getElementById("cartqty")

cartqty.addEventListener("click", function(e) {

        console.log(e.target.id)

  if(e.target && e.target.classList.contains('arrowbtncart'))
  {
    console.log(e.target.classList.contains('Quantity'))
    console.log('this is bottom arrow')
  }
  if(e.target && e.target.classList.contains('arrowtopcart'))
  {
    console.log('this is top arrow')
  }
});

我只是为了使用.stepUp() or .stepDown()增加/减少input.value的值

Answer 1

我能够像这样修复它

let cartqty = document.getElementById("cartqty")
cartqty.addEventListener("click", function next(e) {
  let ttar = 'updates_' + e.target.id;
  let inputvaluee = document.getElementById(ttar)
  if (e.target.classList.contains('arrowbtncart')) {
    inputvaluee.stepDown()
  }
  if (e.target.classList.contains('arrowtopcart')) {
    inputvaluee.stepUp()
  }