基于输入类型的jQuery重载

时间:2010-11-04 12:28:26

标签: jquery triggers overloading html-form

我想创建一个jQuery函数,我可以附加它来形成元素change()事件,但是让函数根据表单元素的类型(输入,选择,无线电,密码)决定做什么。

问题是,我不确定最好的方法 - 编写一个大的函数来决定内部做什么,或编写一种工厂函数,根据其类型将适当的函数附加到元素上...我重新发明轮子?即在jQuery中是否存在默认的类似方式。

[附加:如果它影响决定,则需要在load()上调用函数,以及在change()上调用,并且能够应用/调用会很好吗?功能只是一次]

2 个答案:

答案 0 :(得分:2)

您可以使用几个开关轻松地进行您想要的划分:

$.fn.myPlugin = function() {
   return this.each(function() {
     switch(this.nodeName) {
       case "INPUT":
         switch(this.type) {
           case "radio":
             $(this).change(function() { .... });
             break;
           case "text":
             $(this).change(function() { .... });
             break;
           /*password, etc....*/
         }
         break;
       case "SELECT":
         $(this).change(function() { .... });
         break;
       case "TEXTAREA":
         $(this).change(function() { .... });
         break;
     }         
   });
};

现在这是否是最好的方法肯定有争议......这取决于你是否有一个独特的行为,或者其中一些共享行为,在这种情况下你可能想要定义一个共同的功能关闭并引用它们,例如:

(function($) {
    function method1() { ... }
    function method2() { ... }
    function method3() { ... }

    $.fn.myPlugin = function() {
       return this.each(function() {
         switch(this.nodeName) {
           case "INPUT":
             switch(this.type) {
               case "radio":
                 $(this).change(method1);
                 break;
               case "text":
                 $(this).change(method3);
                 break;
               /*password, etc....*/
             }
             break;
           case "SELECT":
             $(this).change(method1);
             break;
           case "TEXTAREA":
             $(this).change(method2);
             break;
         }         
       });
    };    
})(jQuery);

你可以这样做至少20种方式,这只是一个建议,如果每个元素和类型都有一个特定的行为,听起来就像你问题中的情况一样。如果它不只是忽略我:)。

答案 1 :(得分:1)

我更喜欢在不同类型的输入上触发不同的jquery函数,然后调用其他一些函数(或者输入类型作为参数的相同javascript函数),或者像你说的那样写一个工厂可以决定根据输入控件的类型决定采取什么动作的功能。