Question

我继承的这个wordcount脚本运行良好，但是在页面加载和keyup上处理wordcount两次相同的脚本似乎是多余的。

如果它被写入一次并在两个地方使用，它看起来可能更干净，更有效。我确信它很简单，但我无法理解我是如何设置它的。

$('.wordcount').each(function() {
    var plural_characters = '',
        plural_words = '',
        character_length = $(this).val().length,
        word_length = $(this).val().split(/\b[\s,\.-:;]*/).length,
        counter_span = $(this).parents('tr').find('.counter');

    if (character_length != 1) {
        plural_characters = 's';
    }

    if (word_length != 1) {
        plural_words = 's';
    }

    if ($(this).val() == '') {
        plural_words = 's';
        word_length = '0';
    }

    counter_span
        .html(character_length + ' character' + plural_characters + '<br />' + word_length + ' word' + plural_words);

    $(this).keyup(function() {
        var plural_characters = '',
            plural_words = '',
            character_length = $(this).val().length,
            word_length = $(this).val().split(/\b[\s,\.-:;]*/).length,
            counter_span = $(this).parents('tr').find('.counter');

        if (character_length != 1) {
            plural_characters = 's';
        }

        if (word_length != 1) {
            plural_words = 's';
        }

        if ($(this).val() == '') {
            plural_words = 's';
            word_length = '0';
        }

        counter_span
            .html(character_length + ' character' + plural_characters + '<br />' + word_length + ' word' + plural_words);
    });
});

我用这个脚本设置了一个基本的小提琴：http://jsfiddle.net/Ysgrd/

任何帮助将不胜感激！

Answer 1

绑定keyup处理程序，然后触发它：

http://jsfiddle.net/F9kg5/

$('.wordcount').keyup(function() {

    //...

}).trigger('keyup');

小提琴的完整代码：

$('.wordcount').keyup(function () {
    var plural_characters = '',
        plural_words = '',
        character_length = $(this).val().length,
        word_length = $(this).val().split(/\b[\s,\.-:;]*/).length,
        counter_span = $(this).parents('tr').find('.counter');

    if (character_length != 1) {
        plural_characters = 's';
    }

    if (word_length != 1) {
        plural_words = 's';
    }

    if ($(this).val() == '') {
        plural_words = 's';
        word_length = '0';
    }

    counter_span.html(character_length + ' character' + plural_characters + '<br />' + word_length + ' word' + plural_words);
}).trigger('keyup');

Answer 2

以下是我清理此代码的方法：

function wordCount(object) {
    var plural_characters = '';
    var plural_words = '';
    var character_length = object.val().length;
    var word_length = object.val().split(/\b[\s,\.-:;]*/).length;

    if (character_length != 1) {
        plural_characters = 's';
    }

    if (word_length != 1) {
        plural_words = 's';
    }

    if (object.val() == '') {
        plural_words = 's';
        word_length = '0';
    }
    object.parent().siblings('.label').children('.counter').html(character_length + ' character' + plural_characters + '<br />' + word_length + ' word' + plural_words);

}

wordCount($('.wordcount:first'));

$(document).ready(function(){
    $('.wordcount').keyup(function(){
        wordCount($(this));
    });
});

这是我的jsfiddle，其中包含更多评论： http://jsfiddle.net/34NBT/1/

合并一个冗余的.each / .keyup jQuery脚本

2 个答案: