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

Question

I have the following jquery lines to count how many characters left on 4 different textarea fields:

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

They work fine, but is there anyway to make them more efficient?

Cheers.

Answer 1

Yes,

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

Answer 2

How about this?

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

It can be simplified even more if you have a common class across your textareas, and we can avoid the id manipulation at the end of you give us a bit more details about the HTML layout - specifically how the #countCharacters elements are positioned in the DOM relative to the textareas.

An ideal solution would look something like this:

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

This requires your textareas to have the editors class, and the count elements to have the count class and be positioned immediately after their respective textareas. A similar solution could be designed regardless of where the count elements are actually positioned though.

Update

Based on this HTML, which you included in a comment:

<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>

The text() line needs to change to this:

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

Basically, you're just traversing the DOM tree to get from the textarea element $(this) to the correct .count element. See the jQuery docs for more information on functions that are available to help you move around the DOM.

I also made one more minor change above, to trigger the keyup() function immediately after binding the event handler to it, in order to show the correct count as soon as the page loads.

You can see a working version with your HTML in this fiddle: http://jsfiddle.net/tXArh/

Answer 3

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

Answer 4

Give each of the textareas a common css class (eg submission ). Then use data-attributes on the textareas, to specify the max. number of characters allowed and the id of the element, which shows the number of remaining characters:

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

This allows you to simplify and generalize your jquery code like this:

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

Have a look at this jsfiddle for a working example.

Answer 5

I think you can use the JQuery each function :

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