4

我有以下 jquery 行来计算 4 个不同的 textarea 字段上剩余的字符数：

$(window).load(function () {

    $('#submission1').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters1').text(1500 - len);
    });
    $('#submission2').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters2').text(1500 - len);
    });
    $('#submission3').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters3').text(1500 - len);
    });
    $('#submission4').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters4').text(1500 - len);
    });
});

它们工作得很好，但有没有办法让它们更有效率？

干杯。

4

5 回答 5

3

这个怎么样？

$(window).load(function () {
    $('#submission1, #submission2, #submission3, #submission4').keyup(function() {
        var len = $(this).val().length;
        if (len > 1500) {
            $(this).val($(this).val().substring(0, 1500));
        }
        $('#countCharacters' + $(this).attr('id').slice(-1)).text(1500 - len);
    }).keyup();
});

如果您在整个文本区域中有一个通用类，它可以进一步简化，并且我们可以避免在您最后的 id 操作给我们一些关于 HTML 布局的更多细节 - 特别是 #countCharacters 元素如何在 DOM 中定位相对于文本区域。

理想的解决方案如下所示：

$(window).load(function () {
    $('.editors').keyup(function() {
        var len = $(this).val().length;
        if (len > 1500) {
            $(this).val($(this).val().substring(0, 1500));
        }
        $(this).next('.count').text(1500 - len);
    }).keyup();
});

这要求您的 textareas 具有editors类，并且 count 元素具有count类并立即定位在它们各自的 textareas 之后。不管计数元素实际位于何处，都可以设计类似的解决方案。

更新

基于您在评论中包含的此 HTML：

<div class="field">
    <textarea name="submission1" class="editors" id="submission1" style="width: 680px"><?=$writtenSubmission1;?></textarea>
</div>
<p align="right">
    <span id="countCharacters1" class="count" style="font-weight:bold">1500</span>
    characters left
</p>

该text()行需要更改为：

$(this).closest('.field').next().find('.count').text(1500 - len);

基本上，您只是遍历 DOM 树以从 textarea 元素$(this)到正确的.count元素。有关可帮助您在 DOM 中移动的函数的更多信息，请参阅jQuery 文档。

我还在上面做了一个小改动，keyup()在将事件处理程序绑定到它后立即触发该函数，以便在页面加载后立即显示正确的计数。

您可以在此小提琴中看到带有 HTML 的工作版本：http: //jsfiddle.net/tXArh/

于 2013-06-24T06:48:20.863 回答
3

是的，

function countChars(index){
    var len = this.value.length;
    if (len >=1500) {
        this.value = this.value.substring(0, 1500);
    }
    $('#countCharacters' + index).text(1500 - len);
}

$(window).load(function () {

    $('#submission1').keyup(function() {
        countChars.call(this, 1);
    });
    $('#submission2').keyup(function() {
        countChars.call(this, 2);
    });
    $('#submission3').keyup(function() {
        countChars.call(this, 3);
    });
    $('#submission4').keyup(function() {
        countChars.call(this, 4);
    });
});
于 2013-06-24T06:43:27.587 回答
1

give class 'text-area' to each textarea then,

$(window).load(function () {

    $('.text-area').keyup(function() {
        var index = $(this).attr('alt');
        var len = $(this).val().length;
        if (len >=1500) {
            $(this).val($(this).val().substring(0, 1500));
        }
        $('#countCharacters' + index).text(1500 - len);
    });

});

give first textareas alt='1' and like wise

于 2013-06-24T06:44:00.803 回答
0

给每个文本区域一个通用的 css 类（例如submission）。然后在 textareas 上使用数据属性来指定最大值。允许的字符数和元素的 id，显示剩余字符数：

<textarea id="submission1"
  class="submission"
  data-maxchars="1500"
  data-remaining="remaining1">
</textarea>
<span id="remaining1"></span> chars left.

这使您可以像这样简化和概括您的 jquery 代码：

$(window).load(function(){
    $('.submission').keyup(function() {
        var $ta = $(this);
        var max = $ta.data('maxchars');
        var len = $ta.val().length;
        if (len >= max) {
            $ta.val($ta.val().substring(0, max));
            len = max;
        }
        $('#' + $(this).data('remaining')).text(max - len);
    });
});

看看这个 jsfiddle以获得一个工作示例。

于 2013-06-24T06:47:58.660 回答
0

我认为您可以使用 JQuery 每个功能：

     $.each( [1,2,3,4], function(i, n){  // i = position, n = value
       $('#submission'+n).keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters'+n).text(1500 - len);
       });
    });
于 2013-06-24T06:48:00.173 回答