尝试创建语言切换

Question

所以我正在尝试为我正在开发的网站项目创建语言切换。它包括英语、拉脱维亚语和挪威语之间的巫术。我在 JS 中编写了一个简单的切换代码来适应此功能，它应该在 HTML 中隐藏语言选项，并且只显示所选的语言选项。

$('[lang="lv"]').hide();
$('[lang="no"]').hide();

$('#lang-switch').change(function() {
  var lang = $(this).val();
  switch (lang) {
    case 'en':
      $('[lang]').hide();
      $('[lang="en"]').show();
      break;
    case 'lv':
      $('[lang]').hide();
      $('[lang="lv"]').show();
      break;
    case 'no':
      $('[lang]').hide();
      $('[lang="no"]').show();
      break;
    default:
      $('[lang]').hide();
      $('[lang="en"]').show();
  }
});

[lang="lv"],
[lang="no"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form class="lang-switch">
  <select id="lang-switch">
    <option value="en" onchange="en">EN</option>
    <option value="lv" onchange="lv">LV</option>
    <option value="no" onchange="no">NO</option>
  </select>
</form>

但是，在加载以英语开头的网站后，如果我选择 LV 或 NO，则会导致所有元素的样式都带有

Style:display=none;

。我一生都无法弄清楚为什么。

我想从表单中选择语言，它会隐藏英语导航栏并显示另一种语言的导航栏。

Answer 1

您可以更改父（例如主体）元素上的某些属性的语言，然后通过CSS进行选择：

$('#lang-switch').change(function() {
  $('#wrapper').attr('data-lang-main', $(this).val());
});

[data-lang] {
  display: none;
}

#wrapper[data-lang-main="en"] [data-lang="en"] {
  display: initial;
}

#wrapper[data-lang-main="lv"] [data-lang="lv"] {
  display: initial;
}

#wrapper[data-lang-main="no"] [data-lang="no"] {
  display: initial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form class="lang-switch">
  <select id="lang-switch">
    <option value="en">EN</option>
    <option value="lv">LV</option>
    <option value="no">NO</option>
  </select>
</form>

<div id="wrapper" data-lang-main="en">
  <span data-lang="en">Phrase EN</span>
  <span data-lang="lv">Phrase LV</span>
  <span data-lang="no">Phrase NO</span>
</div>