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

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

1 个答案: