如何用PHP按获取的百分比排序div并保留对应分类边框样式

你可以把所有分类的数值、显示名称、对应边框类打包存入多维数组，按数值排序后循环渲染即可，既能保证排序正确，也不会出现边框样式和分类不匹配的问题。

第一步：重构PHP逻辑，构造分类数组并排序 #

@php
$varA = App\Http\Controllers\ViewTeacherResults::teacherResultsInt();
$varB = App\Http\Controllers\ViewTeacherResults::teacherResultsCre();
$varC = App\Http\Controllers\ViewTeacherResults::teacherResultsSoc();
$varD = App\Http\Controllers\ViewTeacherResults::teacherResultsPer();
$varE = App\Http\Controllers\ViewTeacherResults::teacherResultsMuc();
$varF = App\Http\Controllers\ViewTeacherResults::teacherResultsMoc();
$varG = App\Http\Controllers\ViewTeacherResults::teacherResultsSp();

// 组装所有分类的完整信息
$categoryList = [
    ['label' => 'Intellectual', 'value' => $varA, 'border' => 'intellect-border'],
    ['label' => 'Creative', 'value' => $varB, 'border' => 'create-border'],
    ['label' => 'Social', 'value' => $varC, 'border' => 'social-border'],
    ['label' => 'Perceptual', 'value' => $varD, 'border' => 'percept-border'],
    ['label' => 'Muscular', 'value' => $varE, 'border' => 'musc-border'],
    ['label' => 'Motor', 'value' => $varF, 'border' => 'motor-border'],
    ['label' => 'Spiritual', 'value' => $varG, 'border' => 'spir-border'],
];

// 按数值从高到低倒序排序
usort($categoryList, function ($item1, $item2) {
    return $item2['value'] <=> $item1['value'];
});
@endphp

第二步：循环渲染分类项 #

直接替换掉原来手写的7个div即可：

<div class="table-container">
    @foreach ($categoryList as $item)
        <div class="table-item {{ $item['border'] }}">
            {{ $item['label'] }}: {{ round($item['value']) }}%
        </div>
    @endforeach
</div>

如果你需要改为从低到高升序排序，只需要把usort回调中的$item2['value'] <=> $item1['value']调换顺序为$item1['value'] <=> $item2['value']即可。

内容的提问来源于stack exchange，提问作者verticallypickled