[js se da cuenta de la internacionalización del idioma] usando el archivo de configuración json para darse cuenta

Requisitos: use js para permitir que el proyecto cambie entre chino simplificado, chino tradicional e inglés para lograr la internacionalización del idioma

Primero prepare tres archivos de configuración json:

es.json

{
  "textOne": "Today is Monday",
  "textTwo": "Tomorrow is Tuesday",
  "textThree": "The day after tomorrow is Wednesday",
  "textFour": "Then comes Thursday",
  "textFive": "Finally, Friday"
}

zh-cn.json

{
  "textOne":"今天是周一",
  "textTwo":"明天是周二",
  "textThree":"后天是周三",
  "textFour":"然后是周四",
  "textFive":"最后是周五"
}

zh-tw.json

{
  "textOne": "今天是週一",
  "textTwo": "明天是週二",
  "textThree": "後天是週三",
  "textFour": "然後是週四",
  "textFive": "最後是週五"
}

Prepare la página html, recuerde introducir jQuery

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="selectBox">
        <select id="language-select">
            <option value="zh-cn">中文简体</option>
            <option value="zh-tw">中文繁体</option>
            <option value="en">English</option>
        </select>
    </div>
    <div class="textBox">
        <span id="textOne">今天是周一</span>
        <span id="textTwo">明天是周二</span>
        <span id="textThree">后天是周三</span>
        <span id="textFour">然后是周四</span>
        <span id="textFive">最后是周五</span>
    </div>

</body>

</html>

Para preparar js, dividí dos archivos js, el primero es vincular eventos al cuadro desplegable y luego almacenar el idioma seleccionado en el caché del navegador; el segundo es obtener el tipo de idioma en el caché y luego carga el archivo de idioma correspondiente, la matriz de identificación enviada en un bucle, reasigna el texto a través de $("#xxx").text();

seleccionarLang.js

$(function () {
    // 获取语言选择框和内容容器
    var languageSelect = $('#language-select');

    // 将语言选择存储到本地
    var saveLanguageSelection = function(language) {
        localStorage.setItem('language', language);
    };

    // 监听语言选择框的变化事件
    languageSelect.on('change', function() {
        var selectedLanguage = $(this).val();
        saveLanguageSelection(selectedLanguage);
        location.reload();
    });

    // 加载保存的语言选择
    var selloadLanguageSelection = function () {
        var selectedLanguage = localStorage.getItem('language');
        if (selectedLanguage) {
            languageSelect.val(selectedLanguage);
        }
    };
    // 加载保存的语言选择
    selloadLanguageSelection();
})

cargarLang.js

var ids = []
//获取动态id
var getID = function (data){
    ids = data
}
$(function () {

    // 加载保存的语言选择
    var loadLanguageSelection = function () {
        var selectedLanguage = localStorage.getItem('language');
        if (selectedLanguage) {
            changeLanguage(selectedLanguage);
        }
    };

    // 切换语言
    var changeLanguage = function(language) {
        $.getJSON("./data/" + localStorage.getItem('language') + ".json", function(data) {
            updateText(data);
        });
    };
    // 更新页面文本
    var updateText = function(data) {
        // 使用语言文件中的对应文本更新页面元素
        updateTextByIds(ids, data); // 更新文本
    }

    // 根据标签id数组更新文本
    var updateTextByIds = function(ids, data) {
        for (var i = 0; i < ids.length; i++) {
            $("#" + ids[i]).text(data[ids[i]]);
        }
    }

    // 加载保存的语言选择
    loadLanguageSelection();
})

Use el archivo js en html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./js/selectLanguage.js"></script>
    <script src="./js/loadLanguage.js"></script>
</head>

<body>
    <div class="selectBox">
        <select id="language-select">
            <option value="zh-cn">中文简体</option>
            <option value="zh-tw">中文繁体</option>
            <option value="en">English</option>
        </select>
    </div>
    <div class="textBox">
        <span id="textOne">今天是周一</span>
        <span id="textTwo">明天是周二</span>
        <span id="textThree">后天是周三</span>
        <span id="textFour">然后是周四</span>
        <span id="textFive">最后是周五</span>
    </div>
    <script>
        if (!localStorage.getItem('language')) {
            localStorage.setItem('language', 'zh-cn');
        }
        document.addEventListener("DOMContentLoaded", function () {
            var dynamicIds = [];
            $.getJSON("./data/" + localStorage.getItem('language') + ".json", function (data) {
                Object.keys(data).forEach(function (key) {
                    if (key.startsWith('text')) {
                        dynamicIds.push(key);
                    }
                });
                getID(dynamicIds);
            });
        });
    </script>
</body>

</html>

Una breve interpretación:

acabar con las flores dispersas

[js se da cuenta de la internacionalización del idioma] usando el archivo de configuración json para darse cuenta

Primero prepare tres archivos de configuración json:

Supongo que te gusta