如何将代码放入函数中

时间:2013-08-29 19:57:34

标签: javascript

我有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并且它已经对字符进行了计数。

2 个答案:

答案 0 :(得分:4)

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

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

对于其余的代码,我会在#m*元素上放置数据属性,说明它应该处理哪个#charNum*元素。您可以使用更多参数或使用子字符串等来完成此操作,但我相信它更像是泛型

例如:

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

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

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

答案 1 :(得分:3)

假设一个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'))

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