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

Question

我有以下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);
    });
});

它們工作正常，但是反正是為了使它們更有效率？

干杯。

Answer 1

是，

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

這個怎么樣？

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

如果你的textareas中有一個共同的類，它可以簡化得更多，我們可以避免你在結尾處的id操作給我們更多關於HTML布局的細節 - 特別是#countCharacters元素在DOM中的位置相對於textareas。

一個理想的解決方案看起來像這樣：

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

Answer 3

然后，給每個textarea提供課程'text-area'，

$(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'並且明智一樣

Answer 4

給每個textareas一個共同的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的工作示例。

Answer 5

我想你可以使用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);
       });
    });