javascript 或 jquery 查找 nextSibling

Question

我有一个购物车视图 cart list count 和这份文件

<div class="input-group input-number-group">
    <div class="input-group-button" onclick="decrement_cart(this)">
         <span class="input-number-decrement">-</span>
    </div>
    <input class="input-number text-center" type="number"
                                value="{{ $detail['product_quantity'] }}" min="0" max="1000">
    <div class="input-group-button" onclick="increment_cart(this)">
         <span class="input-number-increment">+</span>
    </div>
</div>

我想通过单击 increment/decrement div 来更改中间的输入值。注意：我不能使用 addEventListener 因为这个文档是由 ajax.

创建的

如何通过单击更改输入值？

function increment_cart(elem) {
     console.log(elem.closest('input'));
}

Answer 1

没有理由不使用 addEventListener 添加事件处理程序。即使您尝试附加处理程序的元素是在加载文档后动态创建的。但是由于您没有按时指定任何有关该时间点的详细信息，我所能做的就是建议如何 select 事件处理程序中的同级元素调用您在 html 代码中指定的方式（使用内联事件处理程序）。这种方法不是很好，因为您只能以这种方式附加一个处理程序，并且它没有严格绑定到一个明确的范围，而是绑定到一个将被评估的字符串。

无论如何，为了在尝试获取兄弟姐妹时严格解决您的问题，您应该使用 .next() 和 .prev() (JQuery) 来获取下一个和上一个兄弟姐妹。

但是，由于您正在寻找更好的解决方案，我向您展示了如何使用 attachHandlers 函数以及这些处理程序应如何处理 event.target 以获取对触发事件的元素的引用，以及如何使用 .closest() 从那里到达想要的元素首先检索父元素然后 .find() 在其子项中获取 input。

这是一个展示概念的演示（添加到您的代码之上）：

//I'm calling the attachHandlers on page load (but you have to call it once the elements are created)
attachHandlers();

function attachHandlers(){
  $('.input-number-increment').on('click', increment_cart);
  $('.input-number-decrement').on('click', decrement_cart);
}

function increment_cart(event) {  
  //gets the element triggerring the event
  const target = event.currentTarget;
  //gets the input element, finding it among the children of .input-number.group parent
  const o = $(target).closest('.input-number-group').find('input');    
  const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val());    
  o.val( currValue+1 );
}

function decrement_cart(event) {
  //gets the element triggerring the event
  const target = event.currentTarget;
  //gets the input element, finding it among the children of .input-number.group parent
  const o = $(target).closest('.input-number-group').find('input');    
  const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val());    
  o.val( currValue-1 );
}

.input-group-button{
  cursor: pointer;
}

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

<div class="input-group input-number-group">
    <div class="input-group-button">
         <span class="input-number-decrement">-</span>
    </div>
    <input class="input-number text-center" type="number" value="0" min="0" max="1000">
    <div class="input-group-button">
         <span class="input-number-increment">+</span>
    </div>
</div>

javascript 或 jquery 查找 nextSibling

javascript or jquery find nextSibling

javascript

jquery

closest

nextsibling