Elementor中如何基于API响应实现文本翻译？

第一步：在Elementor里配置容器 #

• 给存放API编码的容器（不需要显示可设为隐藏）添加CSS类：code-container
• 给每个描述文本容器设置两个属性：
  1. CSS类：desc-container
  2. 自定义属性（Elementor「高级」选项卡→「自定义属性」）：data-code="对应编码"，比如“Ok”的容器加data-code="00"，“Harmful”的加data-code="01"
• 所有描述容器初始设为隐藏：可以给desc-container类加自定义CSS display: none;，或者在代码里统一处理

第二步：用jQuery实现匹配逻辑 #

单条数据场景

如果是单条API数据，直接获取编码后匹配：

// 替换成你从API拿到的实际编码值
var apiReturnedCode = "00";

// 先隐藏所有描述容器
$('.desc-container').hide();
// 找到匹配编码的描述容器并显示
$('.desc-container[data-code="' + apiReturnedCode + '"]').show();

表格多行数据场景

如果是表格每行都有对应编码和描述，循环处理每一行：

// 遍历表格的每一行（给表格行加CSS类`table-row`）
$('.table-row').each(function() {
  // 获取当前行的编码（去掉文本前后空格）
  var currentCode = $(this).find('.code-container').text().trim();
  // 隐藏当前行所有描述容器
  $(this).find('.desc-container').hide();
  // 显示当前行匹配编码的描述容器
  $(this).find('.desc-container[data-code="' + currentCode + '"]').show();
});

注意事项 #

• 确保页面已加载jQuery：Elementor默认会引入，若主题禁用，需在Elementor「自定义代码」里手动添加引用
• 编码要完全匹配：code-container里的文本和data-code的值不能有多余空格，比如API返回“00”就不要写成“ 00 ”
• 异步API数据需放在回调里执行：要等API返回编码后再运行匹配代码，避免拿不到值的情况

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