Elementor自定义组件：PHP实现标记与对应图片数组关联

我正在开发Elementor自定义组件，要实现图片滑块功能，允许用户为每张图片添加标记。已经创建了图片和标记两个Repeater控件，标记的marker_parent字段对应图片的索引值，需要把对应标记添加到图片数组的['markers']字段里，但现有代码无法实现需求。

图片Repeater输出数组： #

Array
(
    [0] => Array
        (
            [image_title] => Image 1
            [_id] => fe58385
            [image_url] => Array
                (
                    [url] => ../wp-content/uploads/2023/05/big-pic-1.png
                    [id] => 1326
                    [size] => 
                    [alt] => 
                    [source] => library
                )

        )

    [1] => Array
        (
            [image_title] => Image 2
            [_id] => 40a0cc6
            [image_url] => Array
                (
                    [url] => ../wp-content/uploads/2023/05/big-pic-2.png
                    [id] => 1327
                    [size] => 
                    [alt] => 
                    [source] => library
                )

        )

)

标记Repeater输出数组： #

Array
(
    [0] => Array
        (
            [marker_title] => mark1-1
            [marker_top] => 40
            [marker_left] => 100
            [_id] => 6763ae7
            [marker_parent] => 0
            [marker_desc] => Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.

Mel ad euismod adipiscing moderatius eos an decore quodsi animal.
        )

    [1] => Array
        (
            [marker_title] => mark2-1
            [marker_top] => 60
            [marker_left] => 100
            [marker_parent] => 0
            [marker_desc] => Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.

Mel ad euismod adipiscing moderatius eos an decore quodsi animal.
            [_id] => 9d1b611
        )

    [2] => Array
        (
            [marker_title] => mark1-2
            [marker_top] => 40
            [marker_left] => 100
            [marker_parent] => 1
            [marker_desc] => Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.

Mel ad euismod adipiscing moderatius eos an decore quodsi animal.
            [_id] => 6030c28
        )

)

我编写的代码： #

$settings = $this->get_settings_for_display();
$images = $settings['images'];
$markers = $settings['markers'];
foreach ($images as $key=>$image) :
   if($key == $markers['marker_parent']){
         $image['marker'] = $markers[$key];
   }
endforeach;

问题分析 #

你的代码存在三个核心问题：

1. 错误直接访问$markers['marker_parent']：$markers是数组集合，每个标记元素才包含marker_parent字段，不能直接取数组的该键。
2. 未处理多标记场景：每张图片可能对应多个标记，你只赋值了单个marker字段，应该用数组存储所有对应标记。
3. 值传递导致修改无效：遍历图片时$image是值拷贝，修改它不会改变原数组，需要用引用或直接操作原数组元素。

解决方案代码 #

$settings = $this->get_settings_for_display();
$images = $settings['images'];
$markers = $settings['markers'];

// 先给每个图片初始化空的markers数组
foreach ($images as &$image) {
    $image['markers'] = [];
}
unset($image); // 释放引用，避免后续操作污染原变量

// 遍历所有标记，分配到对应图片的markers数组中
foreach ($markers as $marker) {
    $parentIndex = (int)$marker['marker_parent'];
    // 检查索引有效性，防止数组越界错误
    if (isset($images[$parentIndex])) {
        $images[$parentIndex]['markers'][] = $marker;
    }
}

代码说明 #

• 先遍历图片数组，给每个图片添加markers空数组，确保所有图片都具备该字段。
• 使用&$image引用遍历，直接修改原数组元素，避免值传递导致的修改无效问题。
• 遍历标记时，将每个标记根据marker_parent的索引值，追加到对应图片的markers数组中。
• 加入索引有效性检查，避免因无效索引引发的PHP错误。

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