创建JQuery函数

很抱歉在平安夜再次打扰你们，但我需要帮助创建一个可重用的JQuery函数。我已经“精心设计”了这组代码，它们都能正常工作。但我真的想把它作为一个函数，这样我就不必重复每个表单的所有内容。我不太确定所有的if语句是如何组合的，这就是为什么我写它的原因。非常感谢任何帮助-哦，我想它也可能是某种插件，但如果我能理解函数的工作原理，这可能是下一步

$(':input:visible').live('blur',function(){
if($(this).attr('required')) {
if($(this).val() == '' ) {  
$(this).css({'background-color':'#FFEEEE' });
$(this).parent('form').children('input[type=submit]').hide();
$(this).next('.errormsg').html('OOPs ... '+$(this).prev('label').html()+'  is required');
$(this).focus();
$(this).attr('placeholder').hide(); } 
else {
$(this).css({'background-color':'#FFF' , 'border-color':'#999999'});
$(this).next('.errormsg').empty();
$(this).parent('form').children('input[type=submit]').show(); }
}
return false;   
});



$(':input[max]').live('blur',function(){
if($(this).attr('max') < parseInt($(this).val()) ){
$(this).next('.errormsg').html( 'OOPs ... the maximum value is '+$(this).attr('max') ); 
$(this).parent('form').children('input[type=submit]').hide();
$(this).focus();
} else {}
return false;   
});



$(':input[min]').live('blur',function(){
if($(this).attr('min') > parseInt($(this).val()) ){
$(this).next('.errormsg').html( 'OOPs ... the minimum value is '+$(this).attr('min') ); 
$(this).parent('form').children('input[type=submit]').hide();
$(this).focus();
} else {}
return false;   
});



$(':input[maxlength]').live('keyup',function(){
if($(this).val()==''){ } 
else {  $(this).next('.errormsg').html( $(this).attr('maxlength')- $(this).val().length +' chars remaining'); }
return false;
});

$（':input:visible'）.live（'blur'，function（）{
if（$（this.attr（'required'））{
如果（$（this.val（）=''）{
$（this.css（{'background-color'：'#ffeee'}）；
$（this）.parent（'form'）.children（'input[type=submit]'））.hide（）；
$（this）.next（'.errormsg'）.html（'OOPs…'+$（this.prev（'label'））.html（）+'是必需的）；
$（this.focus（）；
$（this.attr（'placeholder'）.hide（）；}
否则{
$（this.css（{'background-color'：'FFF'，'border color'：'999999'}）；
$（this.next（'.errormsg'）.empty（）；
$（this）.parent（'form'）.children（'input[type=submit]'）.show（）；}
}
返回false；
});
$（'：输入[max]'）。live（'blur'，function（）{
if（$（this.attr（'max'）parseInt（$（this.val（）））{
$（this）.next（'.errormsg'）.html（'OOPs…最小值为'+$（this.attr（'min'））；
$（this）.parent（'form'）.children（'input[type=submit]'））.hide（）；
$（this.focus（）；
}else{}
返回false；
});
$（'：输入[maxlength]）.live（'keyup'，function（））{
如果（$（this.val（）=''）{}
else{$（this.next（'.errormsg'）.html（$（this.attr（'maxlength'）-$（this.val（）.length+'chars remaining'）；}
返回false；
});

---

如前所述，我非常感谢一件小事（我希望如此），如果没有错误消息实际提交表单，我如何中断任何函数？

创建函数JQuery的语法如下所示：

$.fn.functionname = (function(param1, param2) {

});

$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    function(limit, value) {
        return value <= limit;
    }
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    function(limit, value) {
        return value >= limit;
    }
);

// In your general purpose stuff
var comparators = {
    checkNumberMin: function(limit, value) {
        return value >= limit;
    },
    checkNumberMax: function(limit, value) {
        return value <= limit;
    }
};

// And then in your specific code using it
$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    comparators.checkNumberMax
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    comparators.checkNumberMin
);

//您还可以返回一个值

更新#1

请记住，您必须将所有JQuery代码包装在以下内容中：

$(function() {

});

所以你现在有：

$(function() {
   $.fn.functionname = (function(param1, param2) {

   });
});

更新#2

还请记住，您以这种方式创建的函数可以在jQuery集上调用，如：

$("a.readmore").functionname(); //That is, if you don't have parameters
$("a.readmore").functionname(1, 2);

---

这是基本的，我希望能有所帮助。

创建函数JQuery的语法如下：

$.fn.functionname = (function(param1, param2) {

});

$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    function(limit, value) {
        return value <= limit;
    }
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    function(limit, value) {
        return value >= limit;
    }
);

// In your general purpose stuff
var comparators = {
    checkNumberMin: function(limit, value) {
        return value >= limit;
    },
    checkNumberMax: function(limit, value) {
        return value <= limit;
    }
};

// And then in your specific code using it
$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    comparators.checkNumberMax
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    comparators.checkNumberMin
);

//您还可以返回一个值

更新#1

请记住，您必须将所有JQuery代码包装在以下内容中：

$(function() {

});

所以你现在有：

$(function() {
   $.fn.functionname = (function(param1, param2) {

   });
});

更新#2

还请记住，您以这种方式创建的函数可以在jQuery集上调用，如：

$("a.readmore").functionname(); //That is, if you don't have parameters
$("a.readmore").functionname(1, 2);

---

这是最基本的，我希望能有所帮助。

为什么不将此代码保存在JS文件中，然后作为外部JS文件包含到该文件中呢。 另外，我看到您在live函数的每一行使用$（this），例如

$(this).css({'background-color':'#FFEEEE' });
$(this).parent('form').children('input[type=submit]').hide();

相反，您可以定义一个局部变量，并将$（this）分配给该变量，然后在整个过程中引用它。 e、 g:

---

为什么不将此代码保存在JS文件中，然后作为外部JS文件包含到该文件中呢。 另外，我看到您在live函数的每一行使用$（this），例如

$(this).css({'background-color':'#FFEEEE' });
$(this).parent('form').children('input[type=submit]').hide();

相反，您可以定义一个局部变量，并将$（this）分配给该变量，然后在整个过程中引用它。 e、 g:

一些建议：

1） 正如Clour Blind指出的，您可以通过将新函数分配给

jQuery.fn

（aka

$.fn

，除非您使用的是

noConflict

），来扩展jQuery

2） 你有很多

$(this).foo();
$(this).bar();
$(this).baz();

……等等。每次这样做时，jQuery都必须执行类似于四个函数调用的操作，并将内存分配给一个新的jQuery实例。相反，只需执行一次，然后重复使用结果：

var $this = $(this); // You can call it whatever you like
$this.foo();
$this.bar();
$this.baz();

3） 你说得很对，你可以考虑事物的共性，并从中创造出可重用的事物。例如，您的各种验证

blur

功能都是相同的，但位和段略有不同：

$(':input[min]').live('blur',function(){
    if($(this).attr('min') > parseInt($(this).val(), 10) ){
        $(this).next('.errormsg').html( 'OOPs ... the minimum value is '+$(this).attr('min') ); 
        $(this).parent('form').children('input[type=submit]').hide();
        $(this).focus();
    } else {}
    return false;   
});

所以也许：

$.fn.validateOnBlur = function(attrName, errMsg, validator) {
    this.live('blur', function() {
        var $this = $(this),
            limit = parseInt($this.attr(attrName), 10);
        if(!validator(limit, parseInt($this.val(), 10) ){
            $this.next('.errormsg').html(errMsg.replace("%limit%", limit)); 
            $this.parent('form').children('input[type=submit]').hide();
            $this.focus();
        } else {}
        return false;   
    });
};

我在那里做了一些非常轻微的返工：

• 将

  attrName

  替换为

  'min'

  或

  'max'

• 将基数参数

  10

  添加到对

  parseInt

  的调用中。我假设您的值是十进制的，因此如果用户键入“08”，您希望值为8，而不是错误（因为“08”是无效的八进制表示法）。第二个参数告诉它始终使用该基数（10=十进制）
• 查找limit属性一次并记住它
• 将错误消息参数化（以最小的方式），然后使用

  replace

  交换令牌的限制值

  %limit%

然后你会这样使用它：

$.fn.functionname = (function(param1, param2) {

});

$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    function(limit, value) {
        return value <= limit;
    }
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    function(limit, value) {
        return value >= limit;
    }
);

// In your general purpose stuff
var comparators = {
    checkNumberMin: function(limit, value) {
        return value >= limit;
    },
    checkNumberMax: function(limit, value) {
        return value <= limit;
    }
};

// And then in your specific code using it
$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    comparators.checkNumberMax
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    comparators.checkNumberMin
);

$（':input[max]'）。validateOnBlur(
“max”，
'OOPs…最大值为%limit%'，
函数（极限、值）{
返回值=限制；
}
);

或者更可能的是，您会这样使用它：

$.fn.functionname = (function(param1, param2) {

});

$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    function(limit, value) {
        return value <= limit;
    }
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    function(limit, value) {
        return value >= limit;
    }
);

// In your general purpose stuff
var comparators = {
    checkNumberMin: function(limit, value) {
        return value >= limit;
    },
    checkNumberMax: function(limit, value) {
        return value <= limit;
    }
};

// And then in your specific code using it
$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    comparators.checkNumberMax
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    comparators.checkNumberMin
);

//在您的通用产品中
var比较器={
checkNumberMin：函数（限制、值）{
返回值>=限制；
},
checkNumberMax:函数（限制、值）{
返回值一些建议：

1） 正如Clour Blind指出的，您可以通过将新函数分配给
jQuery.fn
（aka
$.fn
，除非您使用的是
noConflict
），来扩展jQuery

2） 你有很多

$(this).foo();
$(this).bar();
$(this).baz();

…等等。每次这样做时，jQuery都必须执行类似于四个函数调用的操作，并将内存分配给新的jQuery实例。相反，只需执行一次，然后重用结果：

var $this = $(this); // You can call it whatever you like
$this.foo();
$this.bar();
$this.baz();

3） 你说得很对，你可以考虑事物的共性，并从中创造出一个可重用的东西。例如，你的各种验证
blur
函数都是相同的，只是比特和饼图略有不同