jquery - 如何使我的 jQuery 代码更加高效？

Question

我有以下 jquery 行来计算 4 个不同的文本区域字段中剩余的字符数:

$(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);
    });
});

它们工作得很好，但是有什么办法可以让它们更有效率吗？

干杯。

Answer 1

这个怎么样？

$(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();
});

如果您的文本区域有一个公共(public)类，那么它可以进一步简化，并且我们可以避免在最后给我们提供有关 HTML 布局的更多详细信息 - 特别是 #countCharacters 元素如何定位的 id 操作在 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();
});

这要求您的文本区域具有 editors 类，并且 count 元素具有 count 类，并且紧邻其各自的文本区域之后。不管计数元素实际位于何处，都可以设计类似的解决方案。

更新

基于您在评论中包含的此 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 元素。请参阅the jQuery docs有关可帮助您在 DOM 中移动的函数的更多信息。

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

您可以在这个 fiddle 中看到带有 HTML 的工作版本:http://jsfiddle.net/tXArh/