You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Elementor开发:如何在控件中获取另一个控件的取值

Elementor控件联动实现方法

首先明确核心规则:register_controls() 仅在小部件初始化、注册控件结构时执行,不会监听编辑器端用户的实时选择操作,不要尝试在这个方法里直接获取控件的实时选中值来做交互联动。根据你的需求分场景实现即可:

场景1:选择不同选项时,按需展示对应配置控件

这是最常用的联动场景,直接用Elementor原生的condition配置就能实现,不需要额外写JS监听,给需要条件展示的控件绑定显示规则即可:

// 你已经写好的data_types下拉控件,保持原有代码不变
$this->add_control( 
    'data_types',
    [
        'label' => esc_html__('Testimonial Type', 'textdomain'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'options' => [
            'static' => 'Static',
            'dynamic' => 'Dynamic',
        ],
        'default' => 'static',
    ]
);

// 静态类型专属配置项:仅当data_types选中static时显示
$this->add_control(
    'static_testimonial_content',
    [
        'label' => esc_html__('Testimonial Content', 'textdomain'),
        'type' => \Elementor\Controls_Manager::WYSIWYG,
        // 核心条件配置
        'condition' => [
            'data_types' => 'static',
        ],
    ]
);

// 动态类型专属配置项:仅当data_types选中dynamic时显示
$this->add_control(
    'dynamic_data_source',
    [
        'label' => esc_html__('Data Source', 'textdomain'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'options' => [
            'latest_post' => 'Latest Post',
            'woo_review' => 'WooCommerce Review',
        ],
        'condition' => [
            'data_types' => 'dynamic',
        ],
    ]
);

场景2:拿到选中值调用get_data_by_type()业务方法

如果是在小部件渲染、数据处理环节需要拿到data_types的选中值,通过$this->get_settings_for_display()方法取值即可,通常在render()方法里调用:

protected function render() {
    // 获取当前小部件所有配置的有效值
    $settings = $this->get_settings_for_display();
    // 取出data_types的选中值
    $current_type = $settings['data_types'];
    // 调用你的自定义业务方法
    $processed_data = $this->get_data_by_type($current_type);

    // 后续渲染输出逻辑
}

public function get_data_by_type($type){
    // 按传入的类型写对应处理逻辑即可
    return $result;
}

复杂联动场景处理

如果需要实现「选中类型后异步拉取数据填充下一个下拉选项」这类更复杂的交互,需要额外编写编辑器端JS文件,通过Elementor的编辑器脚本钩子加载,给data_types控件绑定change事件,触发时发AJAX请求到后端调用get_data_by_type(),再把返回结果注入到目标控件的选项列表中即可。

踩坑提示:不要在register_controls()里调用get_settings()获取实时交互值,这个阶段拿到的只会是数据库中存储的上次保存的值,无法响应用户在编辑器里的实时切换操作。


内容的提问来源于stack exchange,提问作者Nesar Ahmed

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 22:54:29