基于输入类型的 jQuery 重载

Question

我想创建一个 jQuery 函数，可以将其附加到表单元素的 Change() 事件，但让该函数根据表单元素的类型（输入、选择、单选、密码）决定要执行的操作。

问题是，我不确定最好的方法 - 编写一个大型函数来决定内部要做什么，或者编写一种工厂函数，根据其类型将适当的函数附加到元素......我是在重新发明车轮？即在 jQuery 中是否有默认的方法来做这样的事情。

[附加：如果它影响决策，则需要在 load() 上调用该函数，以及在change() 上调用，并且能够应用/调用会很好吗？该功能仅一次]

Answer 1

您可以通过几个开关轻松地完成您想要的划分：

$.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 种方式执行此操作，这只是一个建议，如果每个元素和类型都有特定的行为，这听起来 就像你问题中的情况一样。如果不是就忽略我:)

Answer 2

我更喜欢在不同类型的输入上触发不同的jquery函数，然后调用一些其他函数（或以输入类型作为参数的相同javascript函数），或者像你说的那样编写一种工厂函数，可以根据更改的输入控件的类型决定采取什么操作。