使用jQuery实现导航元素切换失败，求助排查代码问题

我来帮你搞定这个导航切换的问题！看你给出的代码片段，应该是想实现多语言导航文本切换对吧？目前代码跑不起来主要是缺了几个关键部分，我整理了完整的可运行方案，顺便修正了一些小问题：

完整可运行代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航切换示例</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
    <!-- 补全列表结构，li必须放在ul/ol内才符合HTML规范 -->
    <ul class="nav">
        <li class="lang" key="home">Home</li>
        <li class="lang" key="about">About</li>
        <li class="lang" key="contact">Contact</li>
    </ul>

    <!-- 添加切换按钮，作为触发切换动作的入口 -->
    <button id="toggleLang">切换语言</button>

    <script>
        // 定义多语言JSON数据，你可以根据需求扩展更多语言或字段
        const langData = {
            en: {
                home: "Home",
                about: "About",
                contact: "Contact"
            },
            zh: {
                home: "首页",
                about: "关于我们",
                contact: "联系我们"
            }
        };

        // 标记当前使用的语言状态
        let currentLang = "en";

        // 确保页面DOM加载完成后再执行脚本，避免找不到元素的问题
        $(document).ready(function() {
            // 给切换按钮绑定点击事件
            $("#toggleLang").click(function() {
                // 切换当前语言状态
                currentLang = currentLang === "en" ? "zh" : "en";
                
                // 遍历所有带lang类的导航元素，更新文本内容
                $(".lang").each(function() {
                    // 获取元素的key属性值
                    const navKey = $(this).attr("key");
                    // 从JSON数据中取出对应语言的文本并赋值
                    $(this).text(langData[currentLang][navKey]);
                });
            });
        });
    </script>
</body>
</html>

关键问题说明 #

• 缺少触发元素：你原来的代码没有切换按钮，根本没有触发切换的入口，我添加了#toggleLang按钮来触发点击事件
• HTML结构不规范：li元素不能直接放在body里，必须嵌套在ul或ol中，否则可能影响jQuery选择器的正常工作
• 缺少JSON数据与逻辑绑定：你提到创建了JSON对象，但代码里没体现，我补充了多语言JSON数据，并通过each遍历导航元素完成文本替换
• DOM加载顺序问题：把jQuery代码放在$(document).ready()里，确保页面所有元素加载完成后再执行脚本，避免出现“找不到元素”的错误

额外提示 #

如果你的JSON数据是存放在外部文件中的，可以用$.getJSON()来加载，示例代码如下：

$.getJSON('lang.json', function(data) {
    // 这里用外部加载的data来替换上面的langData即可
});

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