4

4 つの異なるテキストエリア フィールドに残っている文字数をカウントする次の jquery 行があります。

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

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/

于 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

次に、各テキストエリアにクラス「テキストエリア」を与えます。

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

});

最初の textareas alt='1' などを与える

于 2013-06-24T06:44:00.803 に答える
0

各テキストエリアに共通の css クラス (例: submission) を指定します。次に、テキストエリアでデータ属性を使用して、最大を指定します。許可される文字数と、残りの文字数を示す要素の 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 に答える