javascript - 如何根据百分比值更改图标列表的颜色？

Question

我有一个包含 10 个图标的列表，我想根据给定的百分比值更改图标的颜色。例如，值 = 53 则更改列表中前 5 个图标的颜色，或者值 = 98 更改 9 个图标的颜色。

 var malePercentage = 73;

    var start = 0;
    var count = 1; 

    while(start <= malePercentage){

        $("#demographic-male > i:nth-child("+count+") ").css("color", "red");
        start += 10;
        count++;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demographic-male">
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
      <i class="fas fa-male"></i>
    </p>

我尝试过这个，但是当值为 73 时，它改变了 8 个图标的颜色，而不是 7 个图标。

Answer 1

您不需要循环，您可以将 Math.floor() 与 :lt() 选择器结合起来:

var malePercentage = 73;

$("#demographic-male > i:lt("+Math.floor(malePercentage / 10)+")" ).css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" />
<p id="demographic-male">
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
  <i class="fas fa-male"></i>
</p>