Is it possible to flag change language with Jquery

Question

I'm doing my own portfolio website (2 language TH/EN).

The buttons for changing languages. I can do it.

But I think if I change the page, the language button must have problems because new page loads.

My question is

What should I do? When I changed the page The language I chose from the beginning is still active.

Example : The default language is Thai. But I click changed to English.The information in the home page changes to English.

If I click on another menu like About Us, the information on that page is displayed in English.

$("html").each(function () {
  if ($(".lang-select.th").hasClass('active')) {
   $('.lang-select').parents('html').attr('lang', 'th');
   $('.content-th').show();
   $('.content-en').hide();

  } else if ($(".lang-select.en").hasClass('active')) {
   $('.lang-select').parents('html').attr('lang', 'en');
   $('.content-th').hide();
   $('.content-en').show();
  }
 });
 

$(".lang-select.th").click(function () {
  $(this).addClass("active");
  $(".lang-select.en.active").removeClass("active");
  $('.lang-select').parents('html').attr('lang', 'th');
  $('.content-th').show();
  $('.content-en').hide();
 });
 
 $(".lang-select.en").click(function () {
  $(this).addClass("active");
  $(".lang-select.th.active").removeClass("active");
  $('.lang-select').parents('html').attr('lang', 'en');
  $('.content-th').hide();
  $('.content-en').show();
 });

.lang-select {
width:30px;
height:30px;
background:#eaeaea;
cursor:pointer;
}
.lang-select.active {
background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="th">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
      <div class="box-language">
          <span class="lang-select th active">TH</span>
          <span class="lang-select en">EN</span>
     </div>
 
     
     
     <h1 class="content-th">ภาษาไทย Thailand</h1>
     <h1 class="content-en">ภาษาอังกฤษ English</h1>
</body>
</html>

score 0 · Answer 1 · answered Apr 21 '18 at 19:18

If I understand correct, you don't want to pass the language information to the server-side. If you want to use pure jquery/javascript you should pass the language information to the URL. Once you have it there you should use some javascript method to parse URL. I found this method, which may help you:

How to read GET data from a URL using JavaScript?

Good luck!

Is it possible to flag change language with Jquery

1 Answers1