Число символов с несколькими ограничениями

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>