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*元素上放置数据属性，说明它应该处理哪个#charNum*元素。您可以使用更多参数或使用子字符串等来完成此操作，但我相信它更像是泛型。

例如：

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

在密钥处理程序内部，而不是使用$('#charNum1')，使用：

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

Answer 2

假设一个ID总是与另一个ID匹配：

$('#m1,#m2,#m3,#m4,#m5').keypress(function(){
    var $this = $(this),
        $count = $('#charNum' + this.id.match(/(\d+)$/)[0]);
    // $this = m#
    // $count = charNum# that's associated with the m#
});

当然，您始终可以使用data-*属性绑定关联：

<textarea id="m1" data-count="charNum1"></textarea>
<span id="charNum1">300 characters left</span>

取而代之的是$count == $('#' + $(this).data('count'))。

假设我正确理解了这个问题......

如何将代码放入函数中

2 个答案: