jQuery网页中英文切换代码如何实现？-网页设计-锦华智联科技

最简单的实现（使用 `data-*` 属性）

这是最直接、最简单的方法，适合小型项目或快速原型，我们将文本内容直接写在 HTML 的 data-* 属性中。

HTML 结构

为需要切换的文本元素添加一个共同的类名（lang-text），并使用 data-zh 和 data-en 属性来存储两种语言的文本。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">中英文切换</title>
    <style>
        body { font-family: sans-serif; }
        #lang-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
        }
        .lang-btn {
            margin-left: 10px;
            padding: 5px 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            background: #f0f0f0;
        }
        .lang-btn.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</head>
<body>
    <div id="lang-switcher">
        <span class="lang-btn active" data-lang="zh">中文</span>
        <span class="lang-btn" data-lang="en">English</span>
    </div>
    <h1 class="lang-text" data-zh="欢迎来到我的网站" data-en="Welcome to My Website"></h1>
    <p class="lang-text" data-zh="这是一个使用 jQuery 实现的语言切换示例。" data-en="This is an example of language switching using jQuery."></p>
    <p class="lang-text" data-zh="请点击右上角的按钮进行切换。" data-en="Please click the buttons in the top-right corner to switch."></p>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入我们的脚本 -->
    <script src="script.js"></script>
</body>
</html>

JavaScript 代码 (`script.js`)

使用 jQuery 监听语言切换按钮的点击事件，然后遍历所有带有 lang-text 类的元素，根据当前选择的语言更新其文本内容。

$(document).ready(function() {
    // 语言切换按钮点击事件
    $('.lang-btn').on('click', function() {
        // 1. 移除所有按钮的 'active' 类，给当前点击的按钮添加 'active' 类
        $('.lang-btn').removeClass('active');
        $(this).addClass('active');
        // 2. 获取当前选择的语言
        const lang = $(this).data('lang');
        // 3. 遍历所有需要切换文本的元素
        $('.lang-text').each(function() {
            // 4. 根据语言属性设置元素的文本内容
            // 使用 `attr` 获取 data-* 属性的值
            if (lang === 'zh') {
                $(this).text($(this).data('zh'));
            } else if (lang === 'en') {
                $(this).text($(this).data('en'));
            }
        });
    });
    // 页面加载时，设置默认语言（例如中文）
    // 这部分代码其实和点击中文按钮的效果一样，可以写也可以不写
    // 如果不写，页面初始加载时可能显示的是 HTML 的 lang 属性内容
    $('.lang-btn[data-lang="zh"]').click(); 
});

优点：

简单直观,无需额外的 JSON 文件。
HTML 和文本内容在一起，方便查找。

缺点：

HTML 文件会变得臃肿，特别是当文本内容很多时。
不利于维护,如果需要修改文本，需要同时修改 HTML 和可能存在的 JSON 文件。

更专业的实现（使用 JSON 文件）

这是更推荐的方法,尤其对于大型项目，我们将所有文本内容存储在一个外部的 JSON 文件中，HTML 只需要定义结构和类名，这样逻辑更清晰，也方便非技术人员（如翻译）管理翻译内容。

创建语言 JSON 文件

在项目根目录下创建一个 lang 文件夹，并添加两个 JSON 文件。

lang/zh.json (中文)

{
    "welcome": "欢迎来到我的网站",
    "description": "这是一个使用 jQuery 实现的语言切换示例。",
    "instruction": "请点击右上角的按钮进行切换。"
}

lang/en.json (英文)

{
    "welcome": "Welcome to My Website",
    "description": "This is an example of language switching using jQuery.",
    "instruction": "Please click the buttons in the top-right corner to switch."
}

修改 HTML 结构

HTML 不再需要 data-* 属性，只需要给需要替换文本的元素加上一个共同的类名（i18n），并用 data-key 属性指向 JSON 文件中的键。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">中英文切换 (JSON版)</title>
    <style>
        /* 样式与方案一相同 */
        body { font-family: sans-serif; }
        #lang-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
        }
        .lang-btn {
            margin-left: 10px;
            padding: 5px 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            background: #f0f0f0;
        }
        .lang-btn.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</head>
<body>
    <div id="lang-switcher">
        <span class="lang-btn active" data-lang="zh">中文</span>
        <span class="lang-btn" data-lang="en">English</span>
    </div>
    <h1 class="i18n" data-key="welcome"></h1>
    <p class="i18n" data-key="description"></p>
    <p class="i18n" data-key="instruction"></p>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入我们的脚本 -->
    <script src="script-json.js"></script>
</body>
</html>

JavaScript 代码 (`script-json.js`)

这个脚本会先加载默认语言文件,然后根据用户的选择动态加载并应用另一种语言。

$(document).ready(function() {
    let currentLang = 'zh'; // 默认语言
    let translations = {};  // 用于存储当前加载的翻译内容
    // 初始化函数：加载指定语言的翻译文件
    function init(lang) {
        // 显示加载提示（可选）
        // $('.i18n').text('Loading...');
        // 使用 jQuery 的 getJSON 方法加载 JSON 文件
        $.getJSON(`lang/${lang}.json`, function(data) {
            translations = data; // 将加载的数据存入全局变量
            updateLanguage(lang); // 更新页面上的文本
        }).fail(function() {
            console.error("Failed to load language file: lang/" + lang + ".json");
        });
    }
    // 更新页面文本的函数
    function updateLanguage(lang) {
        // 遍历所有带有 i18n 类的元素
        $('.i18n').each(function() {
            const key = $(this).data('key');
            // 如果当前翻译对象中存在该键，则更新文本
            if (translations[key]) {
                $(this).text(translations[key]);
            }
        });
    }
    // 语言切换按钮点击事件
    $('.lang-btn').on('click', function() {
        const lang = $(this).data('lang');
        // 如果点击的是当前语言，则不做任何操作
        if (lang === currentLang) {
            return;
        }
        // 更新按钮的激活状态
        $('.lang-btn').removeClass('active');
        $(this).addClass('active');
        // 加载新语言并更新
        currentLang = lang;
        init(lang);
    });
    // 页面加载时，初始化默认语言
    init(currentLang);
});

优点：

关注点分离：HTML 结构、JavaScript 逻辑和文本内容完全分离。
易于维护：添加新语言或修改翻译内容，只需编辑对应的 JSON 文件。
性能友好：可以预先加载所有语言文件，实现瞬时切换（稍作扩展即可）。
专业标准：这是国际化（i18n）项目的常见做法。

缺点：

相对方案一,文件结构稍复杂。

如何选择？

小型项目、个人博客、快速原型：使用 方案一 足够，开发速度快。
商业项目、多语言支持、需要长期维护：强烈推荐 方案二，它更规范、更易于扩展。

额外优化（方案二的扩展）

添加 HTML lang 属性的切换

这对 SEO 和屏幕阅读器很重要，在 updateLanguage 函数中添加：

// 在 updateLanguage 函数中，更新页面语言属性
function updateLanguage(lang) {
    // ... 原有的更新文本代码 ...
    // 更新 <html> 标签的 lang 属性
    $('html').attr('lang', lang);
}

预加载所有语言文件

为了实现无刷新的瞬时切换,可以在页面加载时就将所有语言文件都下载下来。

$(document).ready(function() {
    let currentLang = 'zh';
    let translations = {};
    const allLangs = ['zh', 'en']; // 定义所有支持的语言
    // 预加载所有语言文件
    const loadPromises = allLangs.map(lang => {
        return $.getJSON(`lang/${lang}.json`).then(data => {
            translations[lang] = data; // 按语言名存储
        });
    });
    // 当所有文件都加载完成后，执行初始化
    Promise.all(loadPromises).then(() => {
        // 设置默认语言
        $('.lang-btn[data-lang="zh"]').click();
    }).catch(error => {
        console.error("Failed to load one or more language files.", error);
    });
    // ... 其余的点击事件处理函数保持不变 ...
    // 点击事件中只需调用 updateLanguage，无需再 init
    $('.lang-btn').on('click', function() {
        const lang = $(this).data('lang');
        if (lang === currentLang) return;
        $('.lang-btn').removeClass('active');
        $(this).addClass('active');
        currentLang = lang;
        updateLanguage(lang); // 直接调用更新函数
    });
    function updateLanguage(lang) {
        $('.i18n').each(function() {
            const key = $(this).data('key');
            if (translations[lang] && translations[lang][key]) {
                $(this).text(translations[lang][key]);
            }
        });
        $('html').attr('lang', lang);
    }
});

这个优化版本更适合对用户体验要求高的项目。

jQuery网页中英文切换代码如何实现？

最简单的实现（使用 data-* 属性）