Question

我的代码说明：
-按下“测试” 按钮：您可以显示或消失五个圆圈。
-按下“英语” 按钮：将内容更改为英语（SweetAlert2弹出消息中的内容除外）。
-按下“韩语” 按钮：将内容更改为韩语（SweetAlert2弹出消息中的内容除外）。

受Adam Azad在此post中的回答的启发，我开始着手创建一个多语言的Web应用程序，该应用程序可以保存用户选择的语言。对于swal中SweetAlert2消息中的内容，我可以在我的Web应用程序中的所有内容之间成功地在英文和韩文之间来回切换。

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

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

-从'<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')和SweetAlert2。
在页面加载时效果很好。但是，当我单击其他“语言”按钮时，SweetAlert2消息中的语言未更改，而SweetAlert2消息中的内容则更改为其他语言。

我想要实现的目标：
-单击“英语”按钮时，将所有内容更改为英语，包括SweetAlert2消息中的内容
-单击“韩语”按钮时，将所有内容更改为韩语，包括var $foo = $(".foo"); var hash = 1; $(".add").on("click", function () { var $newPanel = $foo.clone(); var hashClass = 'zone-panel-' + generateHash(); $newPanel.find(".collapse").removeClass("in"); $newPanel.find(".accordion-toggle").data('hash', hashClass).attr("href", "#" + (++hash)).text("panel " + hash); $newPanel.find(".panel-collapse").attr("id", hash).addClass("collapse").removeClass("in"); $($newPanel).addClass(hashClass); $("#accordion").append($newPanel.fadeIn()); }); var sliderOne = document.querySelector(".abc"); var outputOne = document.querySelector(".one"); sliderOne.oninput = function() { outputOne.innerHTML = sliderOne.value + '%'; } var panelDefault = document.querySelectorAll('.panel-default'); var addZoneButton = document.getElementById('add'); function generateHash(){ return Math.random().toString(16).substr(-5); } addZoneButton.addEventListener('click', function () { var randomNumber = generateHash(); panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber; });消息中的内容

我打算通过代码片段将我的代码包括在这篇文章中。但是，它给了我一条错误消息，并且我的代码无法正常工作。

因此，请看一下这个JSfiddle： https://jsfiddle.net/hlim188/15no3zyd/69/。
（我将无效代码作为注释。）

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

“ vote down”的解释：
每当您遇到马虎，不费力气的帖子，或者答案显然是错误的，甚至是危险的错误答案时，请使用下注。
-在发布此问题之前和期间，我付出了很多努力...
-请不要给我任何解决该问题的建议...

up-vote privilege是第一位的，因为这是您应该关注的重点：将出色的内容推到顶部。对于极端情况，应保留向下投票的权利。这并不意味着可以代替交流和编辑。

Answer 1

完成时

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

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

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

confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt']

Answer 2

受Milney在本文中的答案和Adam Azad在here中的答案的启发，我能够创建一个多语言网站。

STEP 1 ：在创建kubectrl join command消息时将正确的值从数组中拉出。（例如SweetAlert2）

STEP 2 ：因为单击“英语”或“韩语”按钮时，这不会自动更新confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt']消息中的内容，所以我强制执行通过添加SweetAlert2单击“英语”或“韩语”按钮时刷新的网页。

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

如果您想了解有关我如何创建它的详细信息，请阅读此blog post :)

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

2 个答案: