如何使用JQuery根据键名获取JSON值并结合HTML属性实现翻译

你的代码核心问题在于JSON中每个键对应的值是数组类型，而非单个对象，直接访问val.ed无法获取到目标值，需修正数组访问逻辑；同时可优化代码效率，无需遍历整个JSON对象。

完整实现代码 #

JSON文件 (language.json) #

{
  "open": [
    {
      "en": "Open",
      "ed": "Opened"
    }
  ],
  "close": [
    {
      "en": "Close",
      "ed": "Closed"
    }
  ]
}

HTML代码 #

<p translate="open"></p>

修正后的jQuery代码 #

var $word = $("p");
var translateKey = $word.attr("translate"); // 获取元素的translate属性值

$.getJSON('language.json', function(data) {
    // 直接通过键名定位目标数据，无需遍历整个对象
    if (data[translateKey]) {
        // 访问数组第一个元素的ed属性
        $word.html(data[translateKey][0].ed);
    }
});

关键优化点 #

• 移除冗余的$.each遍历，直接通过键名data[translateKey]访问目标数据，提升执行效率
• 修正数组访问逻辑：data[translateKey][0].ed，适配JSON中数组嵌套对象的结构
• 变量名语义化调整，增强代码可读性

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