Question

我有同一个班级的多个字段。字数显示正确，但在一个字段收到输入时更改每个字数的值。此外，如果没有输入，我希望该字段显示单词数为100，但它显示0.有关改进下面代码的建议？

jQuery(document).ready(function() {
//Text area 100 word limit
jQuery('.100_wordCount').text("Word Count: 100");
    jQuery(".100_word_limit").on('keyup', function() {
        var words = this.value.match(/\S+/g).length;
        if (words > 100) {
            // Split the string on first 100 words and rejoin on spaces
            var trimmed = jQuery(this).val().split(/\s+/, 100).join(" ");
            // Add a space at the end to keep new typing making new words
            jQuery(this).val(trimmed + " ");
        }else if(words < 0){ 
            jQuery('.100_wordCount').text("Word Count: 100");
        }else{
            var wordsLeft = 100-words;
            jQuery('.100_wordCount').text("Word Count: " + wordsLeft);
        }
    });
});

Answer 1

我将每个textarea +字数统计（例如，在div中），并且在keyup事件中根据共享的父元素找到另一个子标记。

此示例仅抓取直接父级，但您可以基于共同的祖先或其类名来执行此操作。

例如。 http://jsfiddle.net/mzqo2ruk/

HTML：

<div>
    <textarea class="100_word_limit"></textarea>
    <p class="100_wordCount"></p>
</div>

使用Javascript：

jQuery(document).ready(function() {
//Text area 100 word limit
jQuery('.100_wordCount').text("Word Count: 100");
jQuery(".100_word_limit").on('keyup', function() {
        var words = this.value.match(/\S+/g).length;
        if (words > 100) {
            // Split the string on first 100 words and rejoin on spaces
            var trimmed = jQuery(this).val().split(/\s+/, 100).join(" ");
            // Add a space at the end to keep new typing making new words
            jQuery(this).val(trimmed + " ");
        }else if(words < 0){ 
            jQuery(this).parent().find('.100_wordCount').text("Word Count: 100");
        }else{
            var wordsLeft = 100-words;
            jQuery(this).parent().find('.100_wordCount').text("Word Count: " + wordsLeft);
        }
    });
});

JQuery循环同一个CSS类的多个项目

1 个答案: