Question

我正在使用已经按百分比格式化的状态栏。我目前正在使用PHP7.1和jQuery中的状态栏。

状态栏1至25为蓝色，25至50为绿色，50至75为橙色，75至100为红色。

我想到要进行许多“ if and else”或“ Switch and Case”检查很多变量是疯狂的。

我在这里研究了社区，却一无所获。

有聪明的方法吗？

我必须使用jQuery和PHP。

非常感谢您。

<?php
    $limit=3000;
    $used=1200;
    $percentage = $used / $limit * 100;
    $percentage = round($percentage, 0)
?>

<script type="text/javascript">
    $(document).ready(function(){
    $('#bar').barfiller({ barColor: '#0080ff' });
    });
</script>

<div id="bar" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="<?php echo $percentage; ?>"></span>
</div>

Answer 1

您可以保留

之类的颜色

const colors = ['#faa', '#afa', '#cfc', '#afd'];

const statusBar = $('.fill');
let index = parseInt(parseInt(statusBar.text()) / 25);
if (index == colors.length) {
    index--;
}
statusBar.css('background', colors[index]);

Answer 2

相当于@subhasis他的答案的PHP”

$colors = ['#faa', '#afa', '#cfc', '#afd'];
$barColor = $colors[intval(($percentage == 100 ? --$percentage : $percentage) / 25)];

php7和jQuery中的状态栏

2 个答案: