如何创建一个函数并在事件中调用它

Question

我已经包含了我放在一起的textbox/textarea计数器的代码。 （希望它不会在我的帖子中被弄坏......）

脚本工作得很好，但是我知道我的代码由于我对jquery和javascript的经验不足而臃肿。

我希望有人能告诉我怎么走重复的代码（//事件一个直通5个），并把它变成自己的函数，然后调用每个事件的功能。

感谢，

杰夫

$(document).ready(function() { 


if ($('span[class=tbc] input[type=text], span[class=tbc] textarea')) {   
    $('span[class=tbc] input[type=text], span[class=tbc] textarea').each(function() { 

     var maxL = $(this).attr('MaxLength'); 

     $(this).siblings('span[class=tbc]').prepend('<br /><span id="spanID1">Characters remaining: </span>'); 
     $(this).siblings('span[class=tbc]').append('<strong>' + maxL + '</strong>'); 


      //event one 
      $(this).keyup(function() { 
      var cnt = $(this).val().length; 
      var chars = maxL-cnt; 
      var mesg = $(this).parent('span').attr('ID'); 

      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');  

      if (cnt > maxL - 1) { 
      //alert('Cannot enter anymore characters.'); 
      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
      } 
      }); //end keyup function 


      //event two 
      $(this).keydown(function() { 
      var cnt = $(this).val().length; 
      var chars = maxL-cnt; 
      var mesg = $(this).parent('span').attr('ID'); 

      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');  

      if (cnt > maxL - 1) { 
      //alert('Cannot enter anymore characters.'); 
      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
      } 
      }); //end keydown function 


      //event three 
      $(this).mouseout(function() { 
      var cnt = $(this).val().length; 
      var chars = maxL-cnt; 
      var mesg = $(this).parent('span').attr('ID'); 

      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');  

      if (cnt > maxL - 1) { 
      //alert('Cannot enter anymore characters.'); 
      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
      } 
      }); //end mouseout function 


      //event four 
      $(this).mousemove(function() { 
      var cnt = $(this).val().length; 
      var chars = maxL-cnt; 
      var mesg = $(this).parent('span').attr('ID'); 

      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');  

      if (cnt > maxL - 1) { 
      //alert('Cannot enter anymore characters.'); 
      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
      } 
      }); //end mousemove function 


      //event five 
      $(this).blur(function() { 
      var cnt = $(this).val().length; 
      var chars = maxL-cnt; 
      var mesg = $(this).parent('span').attr('ID'); 

      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');  

      if (cnt > maxL - 1) { 
      //alert('Cannot enter anymore characters.'); 
      $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
      } 
      }); //end blur function 


    }); //end each loop 
} //end if ($('span[class=tbc] input[type=text] 

}); //end ready 

Answer 1

您可以使用jQuery中的bind方法，通过一个绑定的事件列表，而不是结合它们一个：

$(document).ready(function() { 

    // No need for if since .each() will do nothing on an empty jQuery  
    $('span[class=tbc] input[type=text], span[class=tbc] textarea').each(function() { 

     var maxL = $(this).attr('MaxLength'); 

     // Try to save queries that you use a lot 
     var $tbc = $(this).siblings('span[class=tbc]'); 

     // You can use append() and prepend() in the same jQuery chain 
     $tbc.prepend('<br /><span id="spanID1">Characters remaining: </span>') 
      .append('<strong>' + maxL + '</strong>'); 

      // Bind all events at once 
      $(this).bind("keyup keydown mouseout mousemove blur", function() { 
       var cnt = $(this).val().length; 
       var chars = maxL-cnt; 
       var mesg = $(this).parent('span').attr('ID'); 

       $tbc.html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');  

       if (cnt > maxL - 1) { 
        //alert('Cannot enter anymore characters.'); 
        $tbc.html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
       } 
      }); //end bind 


    }); //end each loop 

}); //end ready 

我调整你的代码多一点这样你可以学到一些jQuery的技巧。

Answer 2

这里是什么样子你想达到一个例子：

http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

它展示了如何从何去何从你必须有一个插件。

Answer 3

var handler = function() { 
     var cnt = $(this).val().length; 
     var chars = maxL-cnt; 
     var mesg = $(this).parent('span').attr('ID'); 

     $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');  

     if (cnt > maxL - 1) { 
     //alert('Cannot enter anymore characters.'); 
     $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
     } 
}; 

$(this).keyup(handler); 
$(this).keydown(handler); 
// etc. 

Answer 4

$(document).ready(function() { 
    $('span.tbc').find('input[type=text], span.tbc textarea').each(function() { 
     var ele = $(this); 
     var maxL = ele.attr('MaxLength'); 
     var siblings = ele.siblings('span.tbc'); 
     siblings 
      .prepend('<br /><span id="spanID1">Characters remaining: </span>') 
      .append('<strong>' + maxL + '</strong>'); 
     //event one-five 
     ele.bind("keyup keydown mouseout blur mousemove", function() { 
      var cnt = ele.val().length; 
      var chars = maxL-cnt; 
      var mesg = ele.parent('span').attr('ID'); 
      if (cnt > maxL - 1) { 
       //alert('Cannot enter anymore characters.'); 
       siblings.html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
      } else { 
       siblings.html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>'); 
      } 
     }); //end event function 
    }); //end each loop 
});