javascript - 隐藏下拉菜单中选定的语言

Question

我有一个下拉菜单，用户可以在其中更改他们的语言首选项。我希望拥有它，以便所选的语言不会显示在下拉菜单中。这是我的 html:

<li>
   <a class="languages main-links">
       <img class="flag" src="assets/img/flags/LANGUAGE_CODE.png" alt="">
    LANGUAGE_NAME
   </a>
   <ul class="nav-dropdown">
      <li><a onClick="changeLanguage('en')" hreflang="en"><img class="flag" src="assets/img/flags/en.png" alt="">NAVIGATION_EN</a></li>
      <li><a onclick="changeLanguage('zh-cn')" hreflang="zh-cn"><img class="flag" src="assets/img/flags/zh-cn.png" alt="">NAVIGATION_ZH_CN</a></li>
      <li><a onclick="changeLanguage('zh-hk')" hreflang="zh-hk"><img class="flag" src="assets/img/flags/zh-hk.png" alt="">NAVIGATION_ZH_HK</a></li>
      <li><a onclick="changeLanguage('jp-jp')" hreflang="jp-jp"><img class="flag" src="assets/img/flags/jp-jp.png" alt="">NAVIGATION_JP_JP</a></li>
      <li><a onclick="changeLanguage('ko-kr')" hreflang="ko-kr"><img class="flag" src="assets/img/flags/ko-kr.png" alt="">NAVIGATION_KO_KR</a></li>
      <li><a onclick="changeLanguage('th-th')" hreflang="th-th"><img class="flag" src="assets/img/flags/th-th.png" alt="">NAVIGATION_TH_TH</a></li>
      <li><a onclick="changeLanguage('zh-cn')" hreflang="zh-cn"><img class="flag" src="assets/img/flags/malaysia.png" alt="">malaysia</a></li>
   </ul>

这是我的 JavaScript:

function changeLanguage(lang) {
    if (languageOptions.indexOf(lang) === -1) {
        lang:selected.hide();
        return;
    }
    localStorage.setItem('lang', lang);
    window.location.href = '/' + lang;
}

当我在网上查找时，我只能找到使用 jQuery 实现此目的的方法，如何使用纯 JavaScript 实现此目的？我在代码中尝试过的方法不起作用。

Answer 1

I'd like to have it so that the language which is selected will not show in the drop-down menu.

可以在li上绑定(bind)click事件

$( ".nav-dropdown li[hreflang]" ).click( function(){
   //$(this).hide(); //to hide the clicked li, but not required since page will be redirected anyways
   var lang = $(this).attr("hreflang");
   localStorage.setItem('lang', lang);

   window.location.href = '/' + lang;
});

现在，一旦您再次返回此页面，只需检查您的 localStorage 值即可隐藏所选语言

$(document).ready( function(){
   $( ".nav-dropdown li[hreflang='" + localStorage.getItem('lang') + "']" ).hide();
})