Question

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

<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>

var malePercentage = 73;

var start = 0;
var count = 1; 

while(start <= malePercentage){

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

我尝试过，但是当值是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>

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

1 个答案: