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

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

我会包装每个文本区域 + 字数（例如，在div 中），并在 keyup 事件中根据共享父元素找到另一个子标签。

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

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

目录：

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