通过函数添加多个字符计数器

Question

我使用 jQuery 编写了以下函数来计算和更新元素中的剩余字符数。

function setRemainingChars(containerID, targetID, maxCount){
    $con = $('#'+containerID), $target =  $('#'+targetID);
    $con.css('resize','none');
    $target.html = (maxCount+' remaining');
    $con.keyup(function() {
        var texlen = $con.val().length;
        var rem = maxCount-texlen;
        $target.html(rem+' remaining');
    });
}

我将此函数称为 setRemainingChars('mytextid','myspanid',100)，其中 html 如下所示：

<textarea id='mytextid'></textarea>
<span id='myspanid'></span>

当页面中只有其中一个时，此方法工作正常。但是当这个函数被多次调用时，它只对最后一次起作用。

为什么以及如何解决？

Answer 1

您的主要问题源于未使用 var 或 let 声明局部变量。这是一个糟糕的做法，正如您的问题所证明的那样，并且可能难以调试

没有它，它们就会变成全局变量，每次调用函数时，您都会覆盖这些全局变量，而不是拥有本地实例

改变

$con = $('#'+containerID), $target =  $('#'+targetID);

到

var $con = $('#'+containerID), $target =  $('#'+targetID);

DEMO

通过函数添加多个字符计数器

Adding multiple character counters by a function

javascript

jquery

jquery-events