JQuery的多个字符计数具有相同的类名

Question

我想要在同一个网页上有多个textareas，他们的字符将被计数，他们将需要相同的类名称。问题是我只能输入第一个textarea而不输入其他字符，但是第一个textareas字符数会影响其他字符数，因为每个字符都有相同的类名，我需要弄清楚如何让每个字符数只影响其最接近的textarea。例如，当我输入第一个textarea字段时，所有textarea字段的字符数都会受到影响。我想知道如何在不改变textareas类名的情况下阻止这种情况的发生？

这里是的jsfiddle https://jsfiddle.net/2dytq9bj/

HTML

 <article class="review"> 
      <div class="review-details"> 
       <div class="review-stats"> 
        <!-- content --> 
       </div> 
       <form method="post" action="" class="review-form"> 
        <fieldset> 
         <ol> 
          <li><label for="review-info">Review Info:</label></li> 
          <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li> 
         </ol> 
        </fieldset> 
        <fieldset> 
         <ol> 
          <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li> 
         </ol> 
        </fieldset> 
       </form> 
      </div> 
     </article> 


     <article class="review"> 
      <div class="review-details"> 
       <div class="review-stats"> 
        <!-- content --> 
       </div> 
       <form method="post" action="" class="review-form"> 
        <fieldset> 
         <ol> 
          <li><label for="review-info">Review Info:</label></li> 
          <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li> 
         </ol> 
        </fieldset> 
        <fieldset> 
         <ol> 
          <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li> 
         </ol> 
        </fieldset> 
       </form> 
      </div> 
     </article> 


     <article class="review"> 
      <div class="review-details"> 
       <div class="review-stats"> 
        <!-- content --> 
       </div> 
       <form method="post" action="" class="review-form"> 
        <fieldset> 
         <ol> 
          <li><label for="review-info">Review Info:</label></li> 
          <li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li> 
         </ol> 
        </fieldset> 
        <fieldset> 
         <ol> 
          <li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li> 
         </ol> 
        </fieldset> 
       </form> 
      </div> 
     </article> 

jQuery的

$(document).ready(function() { 
    function countCharacters(input, output, max) { 
     var $input = $(input); 
     var $output = $(output); 
     $output.text(max + ' characters left'); 
     $input 
      .keydown(function(event) { 
       if (event.keyCode != 8 && 
        event.keyCode != 46 && 
        $input.val().length >= max) 
        event.preventDefault(); 
      }) 
      .keyup(function() { 
       var val = $input.val().slice(0, max); 
       var left = max - val.length; 
       $input.val(val); 
       $output.text(left + ' characters left'); 
      }); 
    } 
    countCharacters('.review-info', '.review-info + div .count', 5000); 
}); 

CSS

*{ 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

article{ 
    margin-top: 1em; 
} 

textarea{ 
    width: 90%; 
} 

input{ 
    margin: 1em 0; 
    color: green; 
} 

Answer 1

我做了什么是绑定keydown事件给每个。回顾，信息类，所以我可以从功能方面，其中以textarea的这个引用我在实际编写得到这个。

$(document).ready(function() { 
    function countCharacters(e) { 
     var $input = $(this); 
     var maxLetters = $input.attr('data-max') 
     var inputLength = $input.val().length 
     var $output = $('+ div', this); 
     $output.text((maxLetters - inputLength) + ' characters left'); 

     if (e.keyCode != 8 && 
      event.keyCode != 46 && 
      $input.val().length >= maxLetters){ 
       event.preventDefault(); 
     } 
    } 


    $('.review-info').keydown(countCharacters); 

}); 

的textarea的

最大长度现在正在从HTML数据-max属性获得，所以在你可以为每个textarea设置不同的大小。

https://jsfiddle.net/2dytq9bj/1/

Answer 2

我想这可能会帮助你，我已经改变自己的方式。但我想这会给你一些你想要达到的想法。

JQuery的

$(document).ready(function() { 
    var max = 10; 
    $(".count").text(max + " characters left"); 

$(".review-info").keyup(function() { 
    var curTextarea = $(this); 
    var curCount = curTextarea.val().length; 
    var charLeft = max - curCount; 
    if (charLeft >= 0) { 
     curTextarea.next().children(".count").text(charLeft + ' characters left'); 
     $(this).next().children(".count").css("color", "black"); 
    } else { 
     this.value = this.value.substring(0, max); 
     $(this).next().children(".count").css("color", "red"); 
    } 
    }); //Keyup Function Ends 

}); //Doc Ready Ends 

Working : Fiddle