具有独特元素的 Elementor 中继器

Question

我需要分别更改每个中继器内元素的位置、颜色、背景图像。

我的小部件代码在这里：

$repeater->add_control(
  'clock_gy_minute_hand_position', array(
     'label' => __('Minute Hand Position', 'origami-clock'),
     'type' => Controls_Manager::DIMENSIONS,
     'default' => array('isLinked' => false),
     'size_units' => ['px'],
     'allowed_dimensions' => ['top', 'left'],
     'selectors' => [
        '{{WRAPPER}} .clock' => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left: 
         {{LEFT}}%;',
     ],
  )
  )
 );

当通过循环获取每个中继器的数据时，它将每个时钟指针的CSS位置应用到相同的位置。它将最后一个中继器项目的位置应用于所有元素。我需要唯一地标识每个中继器元素。

我看到有文章是这样说的

'{{WRAPPER}} .clock'.$item['_id'] => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left:{{LEFT}}%;',

不幸的是，这对我来说也不起作用。

Answer 1

选择器应该是

'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} .clock' => 'background-color: {{VALUE}};',

]

将此类添加到您的重复项目中

elementor-repeater-item-' . $item['_id']

希望这对你有用