如何在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和字符串ej中的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]