jquery - 使用选择器作为变量的 jquery 函数

Question

所以我有一个特定的功能需要一次又一次地重复。所以我想我会做一个可以重复使用的功能。

function validate_form(field,validate) {
field.focus(function(){
    $(validate).css('margin-left','206px');
    $(validate).fadeIn();
    $(validate).animate({ 
            'marginLeft': '286px'
            }, 'fast');
    name        = $(field).val();
    alert(name);        
});
}   

调用函数我会使用类似的东西

validation_form('#contact_name','#contact_name_validate');

所以这里的想法是通过函数所需的特定选择器，但我似乎无法让它工作。Is there some special way to pass through selectors when they are used as variables in a function?

Answer 1

如果field参数包含选择器，则必须将其传递给jQuery()函数：

$(field).focus(function(){

另请注意，您可以通过链接要使用的不同方法来提高功能$(validate)：

function validate_form(field, validate) {
    $(field).focus(function () {
        $(validate).css('margin-left', '206px')
                   .fadeIn()
                   .animate({'marginLeft': '286px'}, 'fast');
        name = this.value;
        alert(name);
    });
}

在$(field).val()您可以使用的焦点处理程序内部的点上，$(this).val()或者this.value而不是$(field).val()因为this已经是焦点元素，所以您不需要再次选择它$(field)。

Answer 2

field是一个包含选择器的字符串，而不是 jQuery 对象，您需要：

$(field).focus(function(){
    /* other stuff in here */
});

顺便说一句，这个错误应该出现在 JavaScript 控制台中（它对我来说是这样，至少在 Chromium 中）：

TypeError: Object #contact_name has no method 'focus'

Answer 3

您可以只传递 jQuery 对象，因为这将缓存 jQuery 对象，因此您不会多次检索它们：

var $field = $('#contact_name');
var $validate = $('#contact_name_validate');

validation_form($field, $validate);

function validate_form($field, $validate) {
    $field.focus(function(){
        $validate.css('margin-left','206px');
        $validate.fadeIn();
        $validate.animate({ 
            'marginLeft': '286px'
        }, 'fast');
        name = $field.val();

        alert(name);        
    });
}