jquery - 如何避免 jQuery 中的重复

Question

我一直在为表单编写一些自定义 jQuery 验证，并发现我多次编写相同的元素。如果可能的话，我真的可以使用一些帮助来变得更加“干燥”。我在下面提供了一个示例，如果有人能指出我正确的方向，我将非常感激。

<div class="first-name-wrapper">
    <label for="first_name">First Name:</label>
    <input class="first-name" type="text" name="first_name" id="first_name">
    <div class="validation-msg first-name-error hide">
        <p><i class="fas fa-exclamation`enter code here`-circle"></i> Please tell us your first name</p>
    </div>
</div>
<div class="last-name-wrapper">
    <label for="last_name">Last Name:</label>
    <input class="last-name" type="text" name="last_name" id="last_name">
    <div class="validation-msg last-name-error hide">
        <p><i class="fas fa-exclamation-circle"></i> Please tell us your last name</p>
</div>

$('.first-name').on('input', function () {
    if($('.first-name').val() != "") {
        $('.first-name-wrapper').removeClass('has-error');
        $('.first-name-error').addClass('hide');
    }
});
//last name
$('.last-name').on('input', function () {
    if($('.last-name').val() != "") {
        $('.last-name-wrapper').removeClass('has-error');
        $('.last-name-error').addClass('hide');
    }
});

本质上，这一切都是检查当输入中输入了某些内容时，它会找到包含的包装器并删除“has-error”类，并在输入不为空时隐藏验证消息。

Answer 1

您应该将逻辑委托(delegate)给函数。大致如下:

let validateInput = (el) => {
    if(el.target.value != ""){
        $(el.target.className + "-wrapper").removeClass("has-error");
        $(el.target.className + "-error").addClass("hide");

        //Alternatively ES6 syntax which is less error prone:
        $(`${el.target.className}-wrapper`).removeClass("has-error");
        $(`${el.target.className }-error`).addClass("hide");
    }
}

$(".first-name").on("input", (e) => validateInput(e));
$(".last-name").on("input", (e) => validateInput(e));

根据框架和您拥有的标记，有许多不同的方法。您还可以考虑迭代元素并一次性动态连接所有事件。