2

我有一个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，并且它已经计算了字符数。

4

2 回答 2

4

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

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

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

例如：

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

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

// $('#charNum1')
$($textarea.data("counter"))
于 2013-08-29T19:59:27.873 回答
3

假设一个 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'))反而使。

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

于 2013-08-29T20:05:40.630 回答