Javascript 具有多个限制的字符计数

我是javascript新手，我正在尝试编写一个脚本，确定boxarea的字符计数，然后将计数长度与字符限制数组进行比较。如果boxarea计数超过给定限制，则数组元素将切换另一个类

如果我感到困惑，也许这个（非常糟糕：）脚本会有帮助：

$(document).ready(function(){   
    limit1.count = 10;
    limit2.count = 15;
    limit3.count = 20;


    function getCount (textarea) {
        var i=0;
        for (i=0;i<=5;i++)
        {
        if(textarea.value.length > limit[i].count) {
            $(limit[i].toggleClass("unavailable");
        }
        }
        }
}); 

$（文档）.ready（函数（）{
限值1.count=10；
2.计数=15；
限制3.计数=20；
函数getCount（textarea）{
var i=0；
对于（i=0；i限制[i]。计数）{
$（限制[i].toggleClass（“不可用”）；
}
}
}
}); 

这应该是你的风格：

<style type="text/css">
.box {width: 100px; height: 100px; display: block; margin: 10px; float: left;
    background-color: green;}
.unavailable {background-color: red;}
</style>

.box{宽度：100px；高度：100px；显示：块；边距：10px；浮点：左；
背景色：绿色；}
.unavailable{背景色：红色；}

HTML：

<div><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></div>

<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
<div id="box3" class="box">Box 3</div>

方框1
方框2
方框3

还有javascript：

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type='text/javascript'>  
    function validate()
    {
        var validation = { 
            '#box1': 10, 
            '#box2': 15,
            '#box3': 20
        }; 

        $.each(validation, function(elem, max) { 
            $(elem).removeClass("unavailable");
            if($('#textarea').val().length > max)
                $(elem).addClass("unavailable");
        });
    }

    $(document).ready(function(){   
        $('#textarea').keydown(validate);
        validate();
    });
</script>

函数验证（）
{
变量验证={
“#框1”：10，
“#方框2”：15，
#方框3:20
}; 
$.each（验证，函数（元素，最大值）{
$（elem）.removeClass（“不可用”）；
if（$（'#textarea'）.val（）.length>max）
$（elem）.addClass（“不可用”）；
});
}
$（文档）.ready（函数（）{
$（“#textarea”）.keydown（验证）；
验证（）；
});

1.limit1、limit2、limit3在哪里以及是什么（例如，它们被分配到哪里？）；2.如何调用

getCount

；3.for循环中的5来自哪里？；4.为什么有

limit1

，然后尝试像数组一样引用它（它应该是一个吗？）；5.如果值真的很长，您是否预期该类将被多次切换（从我看来，它将被切换，并且偶数个切换看起来像从未被切换过）。限制1、2、3等由我指定。我假设我将使用单独的脚本调用getCount，例如$（textarea）。getCount（）；。限制也是我希望切换单独类的div的名称。我应该提供完整的示例吗？Eric，谢谢！完全正确。如果我的textarea框名为“quote”，我会使用单独的脚本（如$（quote）.validate（）；？其次，验证计数（例如id1，id2），也是我希望更改其类的div的名称。id必须是唯一的。“#id1”是一个id，因此它只能由一个元素使用（无论是您的div还是您的textarea）。我已稍微更改了我的答案，以包含一个用法示例。我刚刚尝试了它，但它不起作用。不确定在何处查找问题：（是的，就是这样！太棒了！最后一个问题，是否可以动态运行该功能，即不使用“验证”按钮？验证将在用户输入文本时自动进行。您是个天才，先生！非常感谢！