如何在 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 ej: "#custom_message#charsleft1"

Answer 1

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

把var放在他们前面：

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

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

How to call a function multiple times in Jquery to add an event listener without just listening the last one?

javascript

forms

jquery

jquery-selectors