处理多个元素的事件 - 优化我的解决方案

如何解决处理多个元素的事件 - 优化我的解决方案

我正在构建一个简单的商店网站（只是为了练习），即使我当前的解决方案有效，但从我读到的内容来看，它并不是最佳的，可以通过在父元素上创建事件侦听器来改进（这里是 {{ 1}} 而不是在每个锚元素上。问题是当我将事件处理程序附加到它时，如果篮子中有两个或更多元素，那么无论我单击哪个增加按钮（那个来自产品一、二等）。

我的问题是：在这种情况下，将事件侦听器附加到父元素确实是最好的选择，如果是，我如何正确重构我的代码以使增加/减少按钮在最接近的输入值上工作，而不仅仅是在渲染列表中的第一个？ 下面我附上我当前的 JS 代码：

cart-items

HTML：

const qtyBoxes = document.querySelectorAll('.cart-qty-Box');

    qtyBoxes.forEach((Box) => {
    
        const increase = Box.querySelector('.increase');
        const decrease = Box.querySelector('.decrease');
        const currQty = Box.querySelector('.currQty');
        
        increase.addEventListener('click',function(e) {
            e.preventDefault();
            currQty.value++;

            $('#przelicz').click(); //uptades UI
        });
        
        decrease.addEventListener('click',function(e) {
            e.preventDefault();
            if(currQty.value > 0) { 
               currQty.value--;
            }


            $('#przelicz').click(); //updates UI
        });
        
       
        });

如果我尝试构建的内容的描述不清楚，我会在此处粘贴图像链接： screenshot of basket

解决方法

是的，最好将事件侦听器附加到父级，因为您只有一个侦听器，而不是多个侦听器（每个按钮一个）。

---

您可以通过检查 click 事件 (e.target) 的目标属于哪个框来实现此目的：

const click_parent = e.target.closest('.qty-box');

如果是增加或减少按钮，例如：

if (e.target.classList.contains('increase')) {

其余部分的工作方式与您的代码段相同。

工作示例：

document.querySelector('.cart-items').addEventListener('click',function(e) {

  e.preventDefault();
  const click_parent = e.target.closest('.qty-box');
  const currQty = click_parent.querySelector('.currQty');

  if (e.target.classList.contains('increase')) {
    currQty.value++;

    $('#przelicz').click(); //uptades UI
  } else if (e.target.classList.contains('decrease')) {
    if (currQty.value > 0) {
      currQty.value--;
    }

    $('#przelicz').click(); //uptades UI    
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cart-items">
  ///... Item 1 code ...

  <div class="qty-box">
    <div class="qty-ctl">
      <a class="incr-btn decrease" data-action="decrease" href="#">decrease</a>
    </div>
    <input id="qnt" class="qty currQty input-text" type="text" value="2" />
    <div class="qty-ctl">
      <a class="incr-btn increase" data-action="increase" href="#">increase</a>
    </div>
  </div>
  ///... Item 2 code ...

  <div class="qty-box">
    <div class="qty-ctl">
      <a class="incr-btn decrease" data-action="decrease" href="#">decrease</a>
    </div>
    <input id="qnt" class="qty currQty input-text" type="text" value="3" />
    <div class="qty-ctl">
      <a class="incr-btn increase" data-action="increase" href="#">increase</a>
    </div>
  </div>
</div>