如何在 Jquery 中多次调用函数来添加事件侦听器，而不只监听最后一个?

Question

所以我想创建一个函数来计算文本框中的字符并打印它下面的数字。问题是我希望能够重复使用该功能两次，因为我有两个文本框。

<textarea id="custom_message" placeholder="sumthin sumthin" maxlength="240"></textarea>
<div id="charsleft1" class="span-8" style="float:right; text-align:right"></div>
<textarea id="restriction_message" placeholder="other sumthing" maxlength="240"></textarea>
<div id="charsleft2" class="span-8" style="float:right; text-align:right"></div>

我想调用这个函数两次，但只有最后一次调用该函数有效，这是我的函数。

function char_counter_limit(selector, content){
text_box = "#"+selector.split("#")[1]
counter = "#"+selector.split("#")[2]
var maxlength = $(text_box).attr("maxlength");
$(counter).text(0+" / "+maxlength);
$(text_box).on("input", function(){
var maxlength = $(this).attr("maxlength");
var currentLength = $(this).val().length;
if(currentLength <= maxlength){
$(counter).text(currentLength+" / "+maxlength);
}
})
}

选择器将是一个字符串中的文本框的 id 和div："#custom_message#charsleft1">

Answer 1

假设你正在传递不同的选择器，问题是你的代码正在成为我所说的隐式全局变量的牺牲品：你需要声明text_box和counter，以便它们是char_counter_limit函数的本地，而不是全局变量。当它们是全局调用时，第二个调用会覆盖第一个调用。

把var放在他们面前：

function char_counter_limit(selector, content){
var text_box = "#"+selector.split("#")[1]
var counter = "#"+selector.split("#")[2]