jQuery如何获取锚点相邻元素值并实现按钮增减功能

首先，你之前尝试用find/children获取数值失败的原因很明确：.value元素是.btn-min/.btn-plus的兄弟节点，不是它们的后代，所以find（用于查找后代元素）肯定找不到目标元素。再加上页面存在多个这类组件，我们需要确保点击按钮时只操作当前按钮对应的那组数值，而不是全局所有数值。

下面给你两种可靠的解决方案，按需选择：

方案一：事件委托（推荐，支持动态生成的按钮） #

这种方式适合页面按钮是动态加载的场景（比如通过AJAX新增商品条目），事件绑定到父级或文档上，能自动处理新添加的元素：

// 给所有.btn-min和.btn-plus绑定点击事件
$(document).on('click', '.btn-min, .btn-plus', function() {
    // 找到当前按钮所在的容器（确保只操作当前组的数值）
    const $container = $(this).closest('.qty-adjust-inner');
    // 定位到当前组的数值显示元素
    const $qtyDisplay = $container.find('.qty_value');
    // 获取当前数值并转为整数（trim()避免空格干扰解析）
    let currentQty = parseInt($qtyDisplay.text().trim(), 10);

    // 根据按钮类型增减数值，这里限制最小值为0（可按需调整）
    if ($(this).hasClass('btn-min')) {
        currentQty = Math.max(currentQty - 1, 0);
    } else {
        currentQty += 1;
    }

    // 更新显示的数值
    $qtyDisplay.text(currentQty);
    // 同步更新隐藏input的值（如果业务需要）
    $container.find('.value input').val(currentQty);
});

关键逻辑说明： #

• closest('.qty-adjust-inner')：向上查找最近的父容器，精准锁定当前按钮所属的那组数量控件，避免影响页面其他同类组件。
• parseInt(..., 10)：明确使用十进制解析数值，避免意外的八进制解析问题。
• Math.max(..., 0)：防止数值被减到负数，可根据业务需求调整最小值（比如1）。

方案二：直接绑定事件（适合静态渲染的按钮） #

如果页面所有按钮都是初始加载完成就存在的，也可以直接给按钮绑定点击事件：

// 减号按钮逻辑
$('.btn-min').click(function() {
    // 通过兄弟节点找到对应的数值容器，再定位到显示元素
    const $qtyDisplay = $(this).siblings('.value').find('.qty_value');
    let qty = parseInt($qtyDisplay.text().trim(), 10);
    qty = Math.max(qty - 1, 0);
    $qtyDisplay.text(qty);
    $(this).siblings('.value').find('input').val(qty);
});

// 加号按钮逻辑
$('.btn-plus').click(function() {
    const $qtyDisplay = $(this).siblings('.value').find('.qty_value');
    let qty = parseInt($qtyDisplay.text().trim(), 10);
    qty += 1;
    $qtyDisplay.text(qty);
    $(this).siblings('.value').find('input').val(qty);
});

关键逻辑说明： #

• siblings('.value')：直接查找当前按钮的兄弟元素.value，再从中找到数值显示元素，这种方式更直接，但依赖DOM结构的同级关系，如果后续DOM结构调整（比如.value被嵌套到其他元素里），就需要修改代码，容错性不如方案一。

内容的提问来源于stack exchange，提问作者Toji