如何创建函数并在事件中调用它答案

【问题标题】：How to create a function and call it on event如何创建函数并在事件中调用它
【发布时间】：2009-12-20 21:55:33
【问题描述】：

我已经包含了我放在一起的文本框/文本区域计数器的代码。（希望它不会在我的帖子中被破坏......）

该脚本运行良好，但是我知道由于我对 jquery 和 javascript 缺乏经验，我的代码非常臃肿。

我希望有人能告诉我如何获取重复代码（//事件一到五）并将其放入自己的函数中，然后在每个事件上调用该函数。

谢谢，

杰夫

$(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

【问题讨论】：

标签： jquery function textbox character counter

【解决方案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 技巧。

【讨论】：

非常感谢您的帮助。与我的一堆代码相比，这是一个更加优雅和精致的版本。 ;-) 我非常感谢您包含的 cmets，因为这有助于我更好地了解正在发生的事情。再次感谢，杰夫

【解决方案2】：

以下是您尝试实现的目标的示例：

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

它展示了如何从你拥有的东西变成一个插件。

【讨论】：

【解决方案3】：

$(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
});

【讨论】：

感谢您的帮助。我没有考虑像在这段代码中那样添加 if else 语句。干得好。
没问题。顺便说一句，我忘了你可能需要将函数绑定到你想要的“this”上下文。

【解决方案4】：

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.

【讨论】：

感谢您的信息。现在看起来很简单...... :-)