javascript - 如何将代码放入函数中

Question

我有一个 textarea 字段的代码:

$('#m1').keyup(function () {
    var max = 300;
    var len = $(this).val().length;
    var $textarea = $(this);

    if (len >= max) {
        $('#charNum1').text('...you have reached the limit of 300')
    .css ({
      "color":"#ff3b3b",
      "background-color":"#ffffb1",
      "width":"190px"
    });

    //alert($this.text());
    $textarea.val($textarea.val().slice(0, max));
    } else {
        var char = max - len;
        $('#charNum1').text(char + ' characters left')
          .css({
      "color":"green",
      "background-color":"white"
    });

    }
});

问题是我有 5 个这样的区域:

#m1 #m2 #m3 #m4 #m5
#charNum1 #charNum2 #charNum3 #charNum4 #charNum5

当然，我想避免将代码复制 5 次(实际上是 4 次...)。

当加载页面时，它会从表中检索值并填充 #m1...#m5 并且它已经对字符进行了计数。

Answer 1

要使该功能适用​​于您的 #m* 元素，只需选择多个元素:

$('#m1, #m2, #m3').keyup(...

对于其余的代码，我会在 #m* 元素上放置 data 属性，说明它应该放在哪个 #charNum* 元素上地址。您可以使用更多参数 或使用子字符串 等，但我相信这种方式更通用。

例如:

<textarea id="m1" data-counter="#charNum1"></textarea>

在 keyup 处理程序中，不使用 $('#charNum1')，而是使用:

// $('#charNum1')
$($textarea.data("counter"))