10個のアイコンのリストがあり、指定されたパーセンテージ値に従ってアイコンの色を変更したいと思います。たとえば、値= 53の場合、リストの最初の5つのアイコンの色を変更するか、値= 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の場合、7ではなく8つのアイコンの色が変わりました。
そのためのループは必要ありません。セレクター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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加