Как я могу создавать всплывающие сообщения на нескольких языках в SweetAlert2?

Объяснение моего кода:
- нажатие кнопки "контрольная работа": вы можете сделать так, чтобы пять кругов появлялись или исчезали. - нажатие кнопки "Английский": содержимое изменено на английский (за исключением содержимого всплывающих сообщений SweetAlert2). - нажатие кнопки "Корейский": содержимое изменено на корейский (за исключением содержимого всплывающих сообщений SweetAlert2).

Вдохновленный ответом Адам Азад в этом Почта, я начал работать над созданием многоязычного веб-приложения, которое сохраняет выбранный пользователем язык. Я могу успешно переключаться между английским и корейским языками для всего содержимого в моем веб-приложении, за исключением содержимого сообщений swal в SweetAlert2.

- После настройки я добавил 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" и имя ключа для создания всплывающих сообщений на нескольких языках в 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').
Он отлично работал при загрузке страницы. Но,, когда я щелкнул кнопку другого «языка», язык в сообщениях SweetAlert2 не изменился, в то время как содержимое не в сообщениях SweetAlert2 было изменено на другой язык.

Чего бы я хотел добиться:
- Измените все содержимое на английский при нажатии кнопки «Английский», включая содержимое в сообщениях SweetAlert2
- Измените все содержимое на корейский при нажатии кнопки «Корейский», включая содержимое сообщений SweetAlert2.

Я собирался включить свой код в этот пост через фрагмент кода. Но это дало мне сообщение об ошибке, и мой код не работал. Итак, посмотрите, пожалуйста, на этот JSfiddle:https://jsfiddle.net/hlim188/15no3zyd/69/.
(Нерабочие коды я помещаю в комментарии.)

Буду очень признателен за любое понимание решения этой проблемы. Заранее спасибо! :-)


Пояснение к «проголосовать против»:
Используйте свои отрицательные голоса всякий раз, когда вы сталкиваетесь с вопиюще небрежным постом, не требующим усилий, или ответом, который является явно и, возможно, опасно неверным. - Я приложил много усилий до и во время публикации этого вопроса ...
- Вместо того, чтобы голосовать против, дайте мне совет по решению этой проблемы ...

право голоса идет первым, потому что это то, на чем вы должны сосредоточиться: продвигать качественный контент на вершину. Голосование "против" следует использовать в крайних случаях. Это не заменяет общение и редактирование.

Почему против ...? Пожалуйста, дайте мне объяснение ... Если вы думаете, что это дубликат, скажите, пожалуйста, почему. Я бы с удовольствием решил эту проблему и не смог найти ответа даже после прочтения нескольких сообщений в StackOverflow.

Lim 08.08.2018 13:22

Вам нужно передать сообщение в сладком оповещении в соответствии с выбранным языком.

Riddhi 08.08.2018 13:26

@Riddhi Потому что я смог настроить confirmButtonText, изменив его с "Понятно!" to "<div id = " swal2-confirmBtnTxt "style = " color: # 000000 "> Понятно! </div>", мне интересно, можно ли создавать многоязычные всплывающие сообщения в SweetAlert2. Я не задавал этот вопрос, ничего не пробуя ...

Lim 08.08.2018 13:30

@J L Я все равно не голосовал против!

Riddhi 08.08.2018 13:31

@Riddhi ой! спасибо, что дали мне знать :)

Lim 08.08.2018 13:34

Почему еще один голос против ....?! Для тех, кто отрицает, пожалуйста, дайте мне объяснение ... Я изо всех сил старался дать объяснение своей проблемы. Буду очень признателен за любую помощь ...

Lim 09.08.2018 09:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
1 079
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Когда ты делаешь свой

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

Элементы SweetAlert пока не загружаются на страницу ... Вы должны либо вызвать это снова сразу после вызова SweetAlert, либо добавить какой-то прослушиватель событий, который делает это, когда элементы добавляются динамически.

В качестве альтернативы вы можете просто вытащить правильное значение из массива при создании SWAL;

confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt']

Спасибо! Выделение правильного значения из массива при создании SWAL не обновляло автоматически содержимое при нажатии кнопок «Английский» или «Корейский» после загрузки веб-страницы. Итак, я принудительно обновлял веб-страницу при нажатии кнопок «Английский» или «Корейский». Это не идеальное решение. Но пока можно двигаться дальше! :)

Lim 09.08.2018 14:01

Вдохновленный ответом Милни в этом посте и ответом Адам Азад в здесь, я смог создать многоязычный веб-сайт.

ШАГ 1: извлечение правильного значения из массива при создании сообщений SweetAlert2. (например, confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt'])

ШАГ 2: Поскольку при нажатии кнопки «Английский» или «Корейский» автоматически не обновлялось содержимое сообщений SweetAlert2, я принудительно обновлял веб-страницу при нажатии кнопки «Английский» или «Корейский», добавляя value = "Refresh Page" onClick = "window.location.reload()".

Я хотел включить код с помощью фрагмента кода. Но появилось сообщение об ошибке, хотя я скопировал и вставил код из 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 :)

Другие вопросы по теме