javascript - 计算每个元素的百分比

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>