如何在 SweetAlert2 中创建多语言弹出消息？

Question

我的代码解释：
- 按下 "test" 按钮 : 你可以让五个圆圈出现或消失。
- 按下 "English" 按钮 : 内容更改为英文（SweetAlert2 弹出消息中的内容除外）。
- 按下 "Korean" 按钮：内容更改为韩语（SweetAlert2 弹出消息中的内容除外）。

受到 Adam Azad's answer in this 的启发，我开始着手创建一个多语言网络应用程序来保存用户选择的语言。除了 SweetAlert2 中的 swal 条消息中的内容外，我可以成功地在我的网络应用程序中的所有内容之间来回切换英语和韩语。

- 设置后，我为每个我想来回翻译的内容添加了 class="lang" 和 key="(a key name that matches a content goes here)"。

因为我能够通过从 Got it! 更改为 '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>' 来自定义 confirmButtonText，我想我可以简单地添加 class="lang" 和一个键名 来创建多- SweetAlert2 中的语言弹出消息。

- 从 'Thank you!' 更改为 '<h2 class="lang" key="thxMsgTitle"></h2>'：没有任何显示。
- 将形式 'Your input has been recorded.' 更改为 '<div class="lang" key="thxMsgContent"></div>' ：代码显示在弹出消息中，而不是文本。
- 从 <div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div> 更改为 '<div class="lang" key="thxMsgConfirmBtnTxt" id="swal2-confirmBtnTxt" style="color:#000000"></div>' ：没有任何显示。

此外，
我尝试了 if(lang == 'en-us') 和 else if(lang == 'ko')。
它在页面加载方面效果很好。 但是， 当我点击另一个 "language" 按钮时，SweetAlert2 消息中的语言没有改变，而 SweetAlert2 消息中没有的内容被更改为一种不同的语言。

我想达到的目标：
- 单击 "English" 按钮时将所有内容更改为英文，包括 SweetAlert2 条消息
中的内容 - 单击 "Korean" 按钮时将所有内容更改为韩文，包括 SweetAlert2 消息中的内容

我打算通过代码片段将我的代码包含在此 post 中。但是，它给了我一条错误消息，我的代码不起作用。

所以，请看这个 JSfiddle： https://jsfiddle.net/hlim188/15no3zyd/69/.
（我将非工作代码作为注释。）

对于解决此问题的任何见解，我将不胜感激。提前致谢！ :-)

“vote down”的解释：
每当您遇到极其草率、不费吹灰之力的 post 或明显不正确且可能危险的答案时，请使用您的反对票。
- 在 post 解决这个问题之前我付出了很多努力...
- 请给我任何解决此问题的建议，而不是投票反对...

up-vote privilege 排在第一位，因为这是您应该关注的：将精彩内容推到顶部。应为极端情况保留否决票。它不能替代交流和编辑。

Answer 1

当你做你的

$(".lang").each(function(index, element) {

SweetAlert 元素尚未加载到页面上... 您应该在 SweetAlert 调用之后直接再次调用它，或者添加某种事件侦听器在动态添加元素时执行此操作。

或者，您可以在创建 SWAL 时从数组中提取正确的值；

confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt']

Answer 2

受到 Milney's answer in this post & Adam Azad's answer in 的启发，我能够创建一个多语言网站。

第 1 步：在我创建 SweetAlert2 消息时从数组中提取正确的值。（例如，confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt']）

STEP 2 ：因为 "English" 或 SweetAlert2 消息中的内容不会自动更新"Korean" 按钮被点击，我通过添加 value="Refresh Page" onClick="window.location.reload()".

在点击 "English" 或 "Korean" 按钮时强制刷新网页

我想通过使用代码片段来包含代码。但是，尽管我从 JSFiddle 复制并粘贴了代码，但出现了一条错误消息。请在此处检查一个工作示例：https://jsfiddle.net/hlim188/15no3zyd/80/.

If you would like to know detailed information of how I created it, please read this blog post :)

如何在 SweetAlert2 中创建多语言弹出消息？

How can I create multi-language popup messages in SweetAlert2?

html

javascript

jquery

sweetalert2