jQuery中如何保存$(this)选择器为变量并获取对应表单错误提示？

1. 修正空值判断逻辑 #

你当前的空值判断val == 0 || val == null存在错误，空输入框的val()返回的是空字符串""而非0，正确的判断应该是检查去除首尾空格后是否为空：

if (!val.trim()) { // 去除首尾空格后判断是否为空
    // 显示错误
} else {
    // 隐藏错误
}

2. 正确获取对应错误提示元素 #

方法一：用closest()+find()（简洁高效） #

closest()完全支持CSS选择器，之前的写法失效只是因为判断逻辑错误，修正后即可正常工作，而且不需要遍历input-wrapper，直接给所有输入框绑定事件更简洁：

$(".input-field").blur(function() {
    const $input = $(this);
    const $errorMsg = $input.closest(".input-wrapper").find(".error-msg");
    if (!$input.val().trim()) {
        $errorMsg.show();
    } else {
        $errorMsg.hide();
    }
});

方法二：保存input-wrapper变量（你的写法修正后可用） #

你之前保存thisWrapper的思路没问题，只是空值判断出错，修正后代码如下：

$(".input-wrapper").each(function() {
    const $wrapper = $(this);
    const $input = $wrapper.find(".input-field");
    const $errorMsg = $wrapper.find(".error-msg");
    
    $input.blur(function() {
        if (!$input.val().trim()) {
            $errorMsg.show();
        } else {
            $errorMsg.hide();
        }
    });
});

方法三：用parents()替代多层parent() #

如果不想用closest()，可以用parents(".input-wrapper")直接找到父级容器，再获取错误提示元素，避免多层parent()的繁琐写法：

$(".input-field").blur(function() {
    const $errorMsg = $(this).parents(".input-wrapper").find(".error-msg");
    if (!$(this).val().trim()) {
        $errorMsg.show();
    } else {
        $errorMsg.hide();
    }
});

3. 可选：封装通用逻辑 #

如果需要在多个地方复用错误提示的显示/隐藏逻辑，可以封装成函数，不过也可以选择直接在事件处理中完成：

function toggleError($input, show) {
    const $errorMsg = $input.closest(".input-wrapper").find(".error-msg");
    show ? $errorMsg.show() : $errorMsg.hide();
}

$(".input-field").blur(function() {
    toggleError($(this), !$(this).val().trim());
});

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