複数の文字数を持つ文字数

Question

私は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"); 
     } 
     } 
     } 
}); 

Answer 1

これは、自分のスタイルでなければなりません：

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

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> 

そして、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>