總額

Question

我試圖來算的話，在每一個textarea的用戶類型，並把它們加起來，並顯示給用戶，因爲他們鍵入我有這個迄今爲止量：

$("[class^='count[']").bind('keyup click blur focus change paste', function() { 

    sum = 0; 

     $("[class^='count[']").each(function() { 

      var Words = jQuery.trim($(this).val()).split(' ').length; 

      sum += Number(Words); 

      if($(this).val() === '') { sum = 0; } 

      $('#maxwords').children('span').text(sum); 



     }); 



}); 

，這裏是我的HTML：

<ul id="forms"> 

      <li><textarea name="PresentationAbstract1" id="PresentationAbstract1"style="width:700px"></textarea></li> 

      <li><textarea name="PresentationAbstract2" id="PresentationAbstract2"style="width:700px"></textarea></li> 

      <li><textarea name="PresentationAbstract3" id="PresentationAbstract3"style="width:700px"></textarea></li> 


      <li id="maxwords">Total words (<span>0</span>)</li> 
     </ul> 

然而，問題是，這個代碼不輸出任何東西，直到你到達最後一個textarea的，在這種情況下是第三之一，只要你點擊最後一個textarea會計算單詞的數量並輸出它。

以下是所需項目的URL： http://www.meetingproceedings.com/harvester2/wordcount.html。 任何想法，將不勝感激。

Answer 1

您可以通過代碼改進幾件事情，但最突出的是$('#maxwords').children('span').text(sum);在您的.each()迭代中。每次計算textarea中的單詞數時，這將使您的代碼編寫您的字數。然後是if($(this).val() === '') { sum = 0; }行，如果文本區域內沒有任何內容，則重置單詞計數（這就是爲什麼當在第三個文本區域上書寫時該單詞只計數「輸出」到跨度的原因）。

試試這個代碼，而不是：

$(function() { 

    var countWords = function() { 
     var sum = 0; 
     $("textarea").each(function() { 

      var words = $(this).val().split(' '); 
      $.each(words, function(i, v) { 
       if ($.trim(v) !== '') {sum++;} 
      }); 

     }); 

     $('#maxwords span').text(sum); 
    }; 

    // this binds our counting function to the textareas 
    $("textarea").bind('keyup click blur focus change paste', countWords); 

    // let's run this on document ready 
    countWords(); 

}); 

這是一個O(n^2)算法，但它正確檢查重複空格（或者說一個O(nm)？）。嘗試與正則表達式匹配來降低複雜度可能會更好。

這是working on my jsFiddle here。

編輯

更新解決還運行在文件準備計數功能。或者，您還可以將ready處理程序添加到textarea綁定（即$("textarea").bind('ready keyup click blur focus change paste', countWords)），而不是調用函數本身，並且該處理程序也應該啓動到文檔就緒處理程序，但我更願意將其寫出來以便清楚。

Answer 2

爲什麼你有這條線？嘗試刪除它。

if($(this).val() === '') { sum = 0; } 

它導致你的總和，如果你遇到一個空場，你總是會，直到填充後場各個領域有內容復位至零。

Answer 3

$("#form textarea").live('KeyUp', function(){ 
var sum = 0; 
$("#form textarea").each(function(){ 
    sum+= $(this).val().split(' ').length; 

}); 
//put sum in your span 
}); 

如果你希望它是真正的你需要在keyup事件上工作。