Javascript Jquery使用相同的类名进行多个字符计数

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

这是JSFIDLE

HTML

CSS

---

我所做的是将keydown事件绑定到每个.review info类，这样我就可以从函数上下文中得到它，这里引用了我实际编写的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数据的最大属性，所以你可以为每个textarea设置不同的大小

---

我想这可能会对你有所帮助，我改变了你的方式。但我想这会让你对你想要达到的目标有一些了解

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

---

如果我决定添加其他类名和ID，这会影响它们。Idk你是什么意思？定义一个负责向输入添加计数器的特定类名

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

article{
  margin-top: 1em;  
}

textarea{
  width: 90%;
}

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

$(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);

});

$(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