Javascript 带按钮的Html双语言选项（无需重定向到其他页面）

我正在努力使第二语言选项的网站。 以下是该项目的详细信息：

1我没有试图使用谷歌翻译系统或任何其他自动翻译服务来改变整个网站的语言

2我只想翻译网站上的主要描述部分

3我已经编写并保存了描述文本的翻译版本

4I还在一个单独的文件中创建了一个下拉语言选项按钮，但该按钮位于两种语言的相同模板下

因此，我的问题是：

如何使用语言选项按钮在两种语言之间切换 英语和朝鲜语从英语到朝鲜语，以及从朝鲜语到英语，这取决于用户对我的翻译描述文本的选择

---下面的代码是下拉式语言选项按钮--------

语言选项

---

Javascript是最好的选择。在标记中，您希望添加onclick事件侦听器，以便在选择列表项时可以更改HTML元素的文本

<li onclick="toggleLanguage('English')"><a href="#">English</a></li>
<li onclick="toggleLanguage('English')"><a href="#">Korean</a></li>

此函数用于访问要将文本更改为的元素。在本例中，我创建了一个id为description的h1标记

以下是所有更改的示例：

显示英文文本 语言选项 函数切换语言{ let description=document.getElementByIddescription； 如果语言===韩语{ description.innerHTML=显示韩文文本； } 否则{ description.innerHTML=显示英文文本； } }

---

当我建立一个多语言网站时，我就是这样做的。我在代码中添加注释以进行澄清

<form>
    <label for="lang-switch">
        <span lang="ko">언어</span>
        <span lang="en">Language</span>
    </label>
    <select id="lang-switch">
        <option value="en">English</option>
        <option value="ko" selected>한국어</option>
    </select>
</form>

<p>
    <span lang="ko">한국어 텍스트</span>
    <span lang="en">Text in English</span>
</p>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$('[lang]').hide(); // hide all lang attributes on start.
$('[lang="ko"]').show(); // show just Korean text (you can change it)
$('#lang-switch').change(function () { // put onchange event when user select option from select
    var lang = $(this).val(); // decide which language to display using switch case. The rest is obvious (i think)
    switch (lang) {
        case 'en':
            $('[lang]').hide();
            $('[lang="en"]').show();
        break;
        case 'ko':
            $('[lang]').hide();
            $('[lang="ko"]').show();
        break;
        default:
            $('[lang]').hide();
            $('[lang="ko"]').show();
        }
});
</script>

希望它能解决你的问题

---

因为我不会说韩语，所以我以google translate为例

如果你打算使用任何javascript框架，你可以使用i18如果你想使用纯HTML，你可以提供两个不同的静态文件，并更改内容。谢谢！我尝试了这个解决方案，它成功了！但我还有一个问题要问你们，如果我的index.html文件中有几个段落需要翻译，那么我需要多次使用if和else吗？所以我在翻译常见问题部分，共有4个问题。我希望“语言”选项按钮适用于整个FAQ部分。现在，我只是尝试了一个问题，并用您提供的解决方案进行了回答，但我不确定是否有任何方法可以不必再进行5-6个if-and-else语句。希望我的问题对你有意义，谢谢你：没问题。如果要翻译多个元素，只需使用document.getElementById获取DOM元素，然后在If语句中，只需将每个DOM元素设置为相应的语言文本。不会有更多的if/else语句，因为if/else用于区分韩语和英语。相反，在每个if语句下都有更多的行。如果有很多文本要翻译，您可以考虑将相应的文本放入不同的文件JSON中，并使用XMLHTTPJAJAX动态加载文本。

<form>
    <label for="lang-switch">
        <span lang="ko">언어</span>
        <span lang="en">Language</span>
    </label>
    <select id="lang-switch">
        <option value="en">English</option>
        <option value="ko" selected>한국어</option>
    </select>
</form>

<p>
    <span lang="ko">한국어 텍스트</span>
    <span lang="en">Text in English</span>
</p>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$('[lang]').hide(); // hide all lang attributes on start.
$('[lang="ko"]').show(); // show just Korean text (you can change it)
$('#lang-switch').change(function () { // put onchange event when user select option from select
    var lang = $(this).val(); // decide which language to display using switch case. The rest is obvious (i think)
    switch (lang) {
        case 'en':
            $('[lang]').hide();
            $('[lang="en"]').show();
        break;
        case 'ko':
            $('[lang]').hide();
            $('[lang="ko"]').show();
        break;
        default:
            $('[lang]').hide();
            $('[lang="ko"]').show();
        }
});
</script>