如何在多维数组中按指定键引用、取值、排序及按标签筛选图片

1. 按标签筛选图片 #

实现点击按钮筛选需要前端触发+后端处理配合：

前端按钮（HTML） #

给筛选按钮绑定点击事件，把筛选参数传给后端：

<button onclick="filterImages('tag_GlassDoor', 1)">显示带玻璃门的图片</button>
<button onclick="filterImages('tag_GlassDoor', 0)">显示不带玻璃门的图片</button>
<button onclick="filterImages('tag_GlassWall', 1)">显示带玻璃墙的图片</button>

<script>
function filterImages(tag, value) {
    // 用GET请求跳转刷新页面，也可以用AJAX做局部刷新
    window.location.href = `?filter_tag=${tag}&filter_value=${value}`;
}
</script>

后端筛选逻辑（PHP） #

接收前端参数，用array_filter()过滤数组：

// 默认显示所有图片
$filteredImages = $arrImages;

// 有筛选参数时执行过滤
if (isset($_GET['filter_tag']) && isset($_GET['filter_value'])) {
    $targetTag = $_GET['filter_tag'];
    $targetValue = (int)$_GET['filter_value'];
    
    $filteredImages = array_filter($arrImages, function($item) use ($targetTag, $targetValue) {
        // 确保元素存在且值匹配
        return isset($item[$targetTag]) && $item[$targetTag] === $targetValue;
    });
}

// 遍历筛选后的数组展示图片
foreach ($filteredImages as $img) {
    echo "<img src='{$img['img_sm']}' alt='示例图片'>";
}

2. 按数组键排序 #

用usort()自定义排序规则，针对不同键排序：

按tag_GlassDoor升序（0在前，1在后） #

usort($arrImages, function($a, $b) {
    return $a['tag_GlassDoor'] - $b['tag_GlassDoor'];
});

按图片文件名（img_sm）排序 #

usort($arrImages, function($a, $b) {
    return strcmp($a['img_sm'], $b['img_sm']);
});

3. 提取单个值的语法 #

直接通过数组下标访问即可：

// 提取第一个图片的路径
$firstImgPath = $arrImages[0]['img_sm']; // 输出：image1.jpg

// 提取第二个图片的玻璃门标签值
$secondGlassDoorTag = $arrImages[1]['tag_GlassDoor']; // 输出：1

// 遍历数组时逐个提取值
foreach ($arrImages as $imgItem) {
    $src = $imgItem['img_sm'];
    $hasGlassWall = $imgItem['tag_GlassWall'];
    // 后续处理逻辑
}

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