날과 씨

다중 언어 사이트의 나이 인증 모드에서는 모드 내용을 선택한 언어에 따라 내용을 바꿔야 한다.
브라우저 설정 언어에 따라 처음 불러올 때 각 언어로 분배되지만 모드에서 언어를 선택할 때 내용에 변화가 없으면 이상합니다 www
패러디 당하기 전에 눈치 못 챘어요.
고식적인 방법으로 CLASS에 OOFFE를 올려 각 언어의 내용을 담으면 되지만, 개인적으로는 싫거나 촌스럽다고 생각해 다른 방법을 모색했다.
결과는 다음과 같은 방법으로 실시되었다.

이루어지다

기본 정적 HTML 준비

나는 일본어를 기본 표시로 한다.
js에 따라 ID[modal]의 내용도 다르다.
default.haml

#modal
  %h1 こんにちは！
  %ul{onclick: 'loadModal(event)'}
    %li{data:{lang: 'en'}} EN
    %li.active{data:{lang: 'ja'}} JA
    %li{data:{lang: 'zh'}} ZH
    %li{data:{lang: 'fr'}} FR

다양한 언어 전환용 모드 위젯 준비

lang_ja.html

<h1>こんにちは！</h1>
<ul onclick='loadModal(event)'>
  <li data-lang='en'>EN</li>
  <li class='active' data-lang='ja'>JA</li>
  <li data-lang='zh'>ZH</li>
  <li data-lang='fr'>FR</li>
</ul>

lang_en.html

<h1>Hello！</h1>
<ul onclick='loadModal(event)'>
  <li class='active' data-lang-type='en'>EN</li>
  <li data-lang='ja'>JA</li>
  <li data-lang='zh'>ZH</li>
  <li data-lang='fr'>FR</li>
</ul>

lang_fr.html

<h1>Bonjour！</h1>
<ul onclick='loadModal(event)'>
  <li data-lang='en'>EN</li>
  <li data-lang='ja'>JA</li>
  <li data-lang='zh'>ZH</li>
  <li class='active' data-lang='fr'>FR</li>
</ul>

lang_zh.html

<h1>您好！</h1>
<ul onclick='loadModal(event)'>
  <li data-lang='en'>EN</li>
  <li data-lang='ja'>JA</li>
  <li class='active' data-lang='zh'>ZH</li>
  <li data-lang='fr'>FR</li>
</ul>

JS

이벤트를 클릭하여 데이터 속성의 값을 가져오고 해당 값을 사용하여 로드 제어를 수행합니다.)
sample.js

function loadModal(e){
  var lang = e.target.getAttribute('data-lang');
  XHR = new XMLHttpRequest();
  XHR.onreadystatechange = checkingStatus;
  XHR.open("GET", "/modal_" + lang + ".html", true);
  XHR.send(null);
};
function checkingStatus(){
  if (XHR.readyState == 4 && XHR.status == 200){
    var target = document.getElementById("modal");
    target.innerHTML = XHR.responseText;
  }
}

CSS

간단한 물건이니 자유롭게 사용하세요
sample.scss

#modal{
  width: 300px;
  box-sizing: border-box;
  color: #FFF;
  background-color: #000;
  border-radius: 5px;
  padding: 40px 20px;
  margin: 100px auto 0;
  h1{
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
  }
  ul{
    display: flex;
    justify-content: space-around;
    li{
      display: inline-block;
      color: #B7B7B7;
      cursor: pointer;
      &.active{
        color: #FFF;
      }
    }
  }
}

이런 느낌.