使用jQuery each遍历同class元素时如何自定义对应span的文本值

你的原有代码存在3处核心问题：

• 类名选择器未加.前缀，无法匹配到class为plus、minus的span元素
• find()方法用于查找当前元素的子节点，而目标span是input的同级兄弟节点，无法通过该方法获取
• 仅在页面加载时执行一次逻辑，未绑定输入事件，用户修改数值后状态不会同步更新

修正后JS代码 #

// 页面加载完成后初始化状态
jQuery(function(){
    updateQtyStatus();
    // 监听输入值变化，实时更新提示
    jQuery('.qty').on('input change', updateQtyStatus);
})

function updateQtyStatus() {
    jQuery('.qty').each(function(){
        const $input = jQuery(this);
        // 转成整数避免字符串比较错误
        const currentVal = parseInt($input.val());
        const maxVal = parseInt($input.attr('max'));
        const minVal = parseInt($input.attr('min'));
        // 获取对应兄弟span元素
        const $minusTip = $input.prev('.minus');
        const $plusTip = $input.next('.plus');
        
        // 先清空原有提示
        $minusTip.text('');
        $plusTip.text('');
        
        if(currentVal === maxVal) {
            $plusTip.text('Max Value');
        } else if(currentVal === minVal) {
            $minusTip.text('Min Value');
        }
    })
}

CSS和HTML代码不需要修改，直接使用原有代码即可。运行后输入框达到最小值时左侧会显示「Min Value」提示，达到最大值时右侧会显示「Max Value」提示，用户调整输入值时提示会同步更新。

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