javascript - 如何在 jquery 中创建函数并重用它们

Question

我有以下代码

if(!$rta_cl_fn.length > 0){
    formSubmit = false;
    $('#div_cl_fn').addClass('has-error');
}else{
    $('#div_cl_fn').removeClass('has-error');
}

if(!$rta_cl_ln.length > 0){
    formSubmit = false;
    $('#div_cl_ln').addClass('has-error');
}else{
    $('#div_cl_ln').removeClass('has-error');
}

if(!$rta_cl_mn.length > 0){
    formSubmit = false;
    $('#div_cl_mn').addClass('has-error');
}else{
    $('#div_cl_mn').removeClass('has-error');
}

还有更多我只是想创建一个函数所以我只是调用函数而不是一次又一次地使用 if 语句

我已经问了很多次，但似乎没人明白我想要什么...我可以在下面以 php 格式向您展示我正在寻找的内容

public function functionName($var1, $var2){

    $formSubmit = true;

    if(!$var1.length > 0){
        formSubmit = false;
        $var2.addClass('has-error');
    }else{
        $var2.removeClass('has-error');
    }

    return formSubmit;
}

如果您需要更清楚的信息，请询问

html在下面

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label class="control-label">First Name <span class="required" aria-required="true" > * </span></label>
            <input type="text" name="rta_cl_fn" id="rta_cl_fn" class="form-control input-sm">
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group" id="div_cl_fn">
            <label class="control-label">Middle Name <span class="required" aria-required="true" > * </span></label>
            <input type="text" name="rta_cl_mn" id="rta_cl_mn" class="form-control input-sm">
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group" id="div_cl_ln">
            <label class="control-label">Last Name<span class="required" aria-required="true" > *</span></label>
            <input type="text" name="rta_cl_ln" id="rta_cl_ln" class="form-control input-sm">
            <span class="help-block"></span>
        </div>
    </div>
</div>

同样，我的问题是如何在 jQuery 中声明/创建函数并在代码中使用它们。

问候

Answer 1

下面是如何使用 jQuery

创建可重用的函数

(function($) {
    $.fn.functionName = function (var1, var2) {
            var formSubmit = true;

        if(!var1.length > 0){
            formSubmit = false;
            var2.addClass('has-error');
        }else{
            var2.removeClass('has-error');
        }

        return formSubmit;
        }
    };
  }(jQuery));

用法:

console.log($(".form-group").functionName('param1', 'param2'));

或

一种相当简单的方法是使用 var 来声明您的函数。

var myReusableFunction = function(var1, var2){
        var formSubmit = true;

        if(!var1.length > 0){
            formSubmit = false;
            var2.addClass('has-error');
        }else{
            var2.removeClass('has-error');
        }

        return formSubmit;
};

用法:

您可以像调用普通的 javascript 函数一样调用此函数

console.log(myReusableFunction('param1', 'param2'));

检查这个tutorial

希望这对您有所帮助。