点击WooCommerce数量按钮时，如何用jQuery选中同产品最近数量输入框？

原有代码的问题 #

• 选择器层级查找错误：从点击的按钮出发，找到最近的div.changeQtyButton容器后，在这个容器内部找数量输入框，但输入框实际是和changeQtyButton平级的兄弟节点，根本不在这个容器里，自然找不到匹配元素
• 属性选择器语法错误：写的input[name=''quantity]多嵌了一层单引号，就算层级对了也匹配不到正确的输入框
• 点击绑定的方式不兼容动态渲染场景：直接给所有button绑定click事件，碰到WooCommerce AJAX刷新购物车节点时会失效

正确的实现逻辑 #

核心思路是先锁定当前按钮所属的独立产品块，再在这个块的范围内查找对应数量输入框，从根源上避免错配其他产品的输入框。
查找路径拆解：

1. 从当前点击的按钮节点向上，匹配类名以product-开头的父容器，也就是结构里的product-1/product-2这类独立产品块
2. 在锁定的当前产品块范围内，查找.quantity节点下的input输入框，这个输入框就是和当前按钮同属一个产品的目标输入框

修正后的可运行代码 #

// 用事件委托绑定，兼容AJAX动态渲染的节点
jQuery(document).on('click', '.buttonNumber', function(){
    // 1. 定位当前按钮所属的产品块
    const $currentProductBlock = jQuery(this).closest('div[class^="product-"]');
    // 2. 在当前产品块范围内定位数量输入框
    const $qtyInput = $currentProductBlock.find('.quantity input');
    // 3. 取按钮上的数字值，赋值给输入框
    const targetQty = jQuery(this).text().trim();
    $qtyInput.val(targetQty);
    
    console.log('已为当前产品设置数量：', $qtyInput.val());
});

方案优势 #

• 不会错配其他产品的输入框：所有查找范围都锁定在当前按钮所属的独立产品块内，就算页面上有几十组产品按钮和输入框也不会串
• 结构兼容性强：哪怕后续在changeQtyButton和quantity块之间新增其他DOM节点，只要两个块还在同一个产品容器内，选择器就不会失效
• 适配WooCommerce的动态加载逻辑：用事件委托的方式绑定点击事件，不管购物车区域是初始加载还是AJAX刷新后的新节点，点击事件都能正常触发

注意：如果后续你的产品块类名不是以product-开头的规则，只需要把closest()里的选择器换成实际的产品块类名即可，逻辑不需要改动

内容的提问来源于stack exchange，提问作者โอ ศราวุธ