jquery - 从选择选项到 href 标记的语言选择器

Question

我有一个与 select - 选项配合得很好的语言选择器。但是，我想将其更改为 a/li 标签。这能行吗？本地存储也被用于其中，以获取用户选项。

$('[lang="fr"]').hide();
$('[lang="sp"]').hide();

let savedLang = "en"
//let savedLang = localStorage.getItem('lang')

if (savedLang) {
  let element = document.querySelector(`option[value='${savedLang}']`);
  element.selected = true
  selectText(savedLang);
}

$('#lang-switch').change(function() {
  var lang = $(this).val();
  //Local storage wont work at Stack Overflow
  //localStorage.setItem('lang', lang);
  selectText(lang);
})

function selectText(lang) {
  switch (lang) {
    case 'en':
      $('[lang]').hide();
      $('[lang="en"]').show();
      break;
    case 'fr':
      $('[lang]').hide();
      $('[lang="fr"]').show();
      break;
    case 'sp':
      $('[lang]').hide();
      $('[lang="sp"]').show();
      break;
    default:
      $('[lang]').hide();
      $('[lang="en"]').show();
  }
}

[lang="fr"],
[lang="sp"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Change language</p>

<select id="lang-switch">
  <option value="en">English</option>
  <option value="fr">French</option>
  <option value="sp">Spanish</option>
</select>

<p lang="en">Hello!</p>
<p lang="fr">Bojour!</p>
<p lang="sp">Hola!</p>

标签： jqueryhtmlcss