計算百分比

Question

我有下面的代碼來計算各元素的比例（如投票表決系統）：

$(document).ready(function() { 
 
    $("#percentage").click(function() { 
 
     var number, sumNumbers = 0, newPercent; 
 
    
 
     $(".item").each(function() { 
 
      number = $(this).children(".itemNum").text(); 
 
      number = +number; 
 

 
      sumNumbers += number; 
 

 
      if(sumNumbers != 0) { 
 
       newPercent = (number/sumNumbers) * 100; 
 
      } else { 
 
       newPercent = 0; 
 
      } 
 

 
      $(this).children(".percentage").text(newPercent+"%"); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="item"> 
 
    <span class="itemNum">0</span> <span class="percentage"></span> 
 
</div> 
 

 
<div class="item"> 
 
    <span class="itemNum">2</span> <span class="percentage"></span> 
 
</div> 
 

 
<div class="item"> 
 
    <span class="itemNum">1</span> <span class="percentage"></span> 
 
</div> 
 

 
<button id="percentage">Calculate Percentage!</button>

但是，結果是：

0 0% 
2 100% 
1 33.33333333333333% 

那麼，如何計算返回以下結果呢？

0 0% 
2 66.66666666666667% 
1 33.33333333333333% 

我需要這些結果在我的輪詢系統上做一個進度條，所以，如何做到這一點？

Answer 1

您需要通過解析文本爲整數parseInt（）函數。

而你需要首先總結數字，然後你可以計算出百分比。

對於一個循環問題：
您無法在一個循環中統計百分比。解釋here

$(document).ready(function() { 
 
    $("#percentage").click(function() { 
 
     var number, sumNumbers = 0, newPercent; 
 
     $(".item").each(function(){ 
 
       number = $(this).children(".itemNum").text(); 
 
       sumNumbers += parseInt(number); 
 
       
 
      }); 
 
     $(".item").each(function() { 
 
      number = parseInt($(this).children(".itemNum").text()); 
 

 
      if(sumNumbers != 0) { 
 
       newPercent = (number/sumNumbers) * 100; 
 
      } else { 
 
       newPercent = 0; 
 
      } 
 

 
      $(this).children(".percentage").text(newPercent+"%"); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="item"> 
 
    <span class="itemNum">0</span> <span class="percentage"></span> 
 
</div> 
 

 
<div class="item"> 
 
    <span class="itemNum">2</span> <span class="percentage"></span> 
 
</div> 
 

 
<div class="item"> 
 
    <span class="itemNum">1</span> <span class="percentage"></span> 
 
</div> 
 

 
<button id="percentage">Calculate Percentage!</button>