Javascript 使用单个函数更新多个div的charcount

我正在尝试使用我在网上找到的代码片段来实现charcount。它适用于单个文本区域。我有多个不同计数限制的文本区域。下面是适用于单个表单的代码

Javascript:
function countChar(val,count,focus){

        var len = val.value.length;
    var lim=count;
    var focussed=focus;

    if (len >= lim) {

            $('#charNum').text(lim - len);
            $('#charNum').addClass('exceeded');
        /* val.value = val.value.substring(0, lim);*/   
        }else {
        if(focussed===0){
            $('#charNum').html('<a>&nbsp;</a>');
        }
                else {
            $('#charNum').text(lim - len);
            $('#charNum').removeClass('exceeded');
        }
        }
};

HTML:
<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description'  onkeyup=\"countChar(this,200,1)\" onblur=\"countChar(this,200,0)\" rows='10' cols='20'></textarea>

Javascript:
函数countChar（val、count、focus）{
var len=val.value.length；
var lim=计数；
var focused=焦点；
如果（len>=lim）{
$（'#charNum'）.text（lim-len）；
$（'#charNum'）.addClass（'超出'）；
/*val.value=val.value.substring（0，lim）；*/
}否则{
如果（聚焦===0）{
$（'#charNum'）.html（''）；
}
否则{
$（'#charNum'）.text（lim-len）；
$（'#charNum'）。removeClass（'超出'）；
}
}
};
HTML:

如果我有两个文本区域，如何修改此代码以使其工作？我知道如何在脚本中获取div的id，但我不知道如何正确更新计数器div，比如#charNum1和#charNum2。谢谢你的提示。谢谢

编辑：

---

我在想，我可以将计数器div命名为“Charnum+divName”，如果这有帮助的话

如果每个textarea都有自己的div，你可以在countChar函数中添加一个额外的参数，该参数将是div的名称。因此，你可以得到如下结果：

function countChar(val,count,focus, charCountDiv)

然后，jQuery不是在函数中硬编码，而是：

$(charCountDiv) 

---

这应该是我认为你想要做的

如果使用jQuery附加事件处理程序，则可以在处理程序中使用

this

来引用触发事件的元素，从而避免在函数中硬编码元素ID

我建议添加一个允许最大字符数的属性，并删除内联事件处理程序：

<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description' data-maxChars="200" rows='10' cols='20'></textarea>
<div id='charNum2' class='counter'>&nbsp;</div>
<textarea id='otherfield' name='otherfield' data-maxChars="400" rows='10' cols='20'></textarea>

---

演示：

您可能希望提供一个示例，说明输入/字符计数元素的html是什么样子的-它们在dom树中的位置如何。@PiotrJakubowski html或多或少会这样。没错。更具体地说，在函数中，我可以得到id，比如var divID=val.id。现在，是否可以使用类似$（divID+'CharNum'）.html（..）的东西？是的，应该可以。它将在$（）中搜索与整个字符串表示形式匹配的元素

$(document).ready(function() {
    $("textarea[data-maxChars]").on("keyup blur", function(e) {
        var $this = $(this),
            $counter = $this.prev(),
            len = $this.val().length,
            maxChars = +$this.attr("data-maxChars");

        $counter.text(maxChars - len).toggleClass("exceeded", len > maxChars);
    });
});