如何在 jQuery 页面加载时只显示一种语言

Question

我使用了 jQueryscript.net 的脚本进行翻译，我在预建主题上使用它，所以我认为主题的 css 阻止了我的代码首先应用，在控制台中，页面加载时我看不到内联样式，但是当我切换语言时它会显示并且切换完美 HTML:

<head>
    <style>
        li[lang="en"] {display: none}
        li[lang="ar"] {display: none}
    </style>
</head>
<body>
  <div class="navigation-navbar collapsed">
    <ul class="navigation-bar navigation-bar-left">
        <li lang="en"><a href="#hero">Home</a></li>
        <li lang="ar"><a href="#hero">الصفحة الرئيسية</a></li>
    </ul>
   </div>
    <script src="jquery-simple-multi-lang.js"></script>
    <script>
    $("document").ready(function() {

      $("input[type=radio]").change(function() {
        $("li[lang]").languageSwitcher( $(this).attr("id") );
      });

    });

    </script>
</body>

jquery-简单多-lang.js:

(function($){
  $.fn.languageSwitcher = function(lang){
    $.each(this, (index, value) => {
        if (lang == $(value).attr("lang")) {
          $(value).css("display", "inline");
        } else {
          $(value).css("display", "none");
        }
      });      
    return this;
  }
}(jQuery));

在页面加载时在控制台中显示两种语言：

    <div class="navigation-navbar collapsed">
      <ul class="navigation-bar navigation-bar-left">
        <li lang="en" class="active"><a href="#hero">Home</a></li>
        <li lang="ar" class="active"><a href="#hero">الصفحة الرئيسية</a></li>
      </ul>
    </div>

在控制台中，当我使用切换器时，它完美地应用样式并显示所选语言：

 <div class="navigation-navbar collapsed">
   <ul class="navigation-bar navigation-bar-left">
     <li lang="en" class="active" style="display: inline;"><a href="#hero">Home</a></li>
     <li lang="ar" class="active" style="display: none;"><a href="#hero">الصفحة الرئيسية</a></li>
   </ul>
 </div>

Answer 1

这是因为没有点击任何输入收音机，所以任何 li 将不可见。

要显示 en onload 而不进行 javascript 修改，请更改 CSS 并将 checked 添加到选定的 radio

$("document").ready(function() {
  $("input[type=radio]").change(function() {
    $("li[lang]").languageSwitcher($(this).attr("id"));
  })

});

(function($) {
  $.fn.languageSwitcher = function(lang) {
    $.each(this, (index, value) => {
      if (lang == $(value).attr("lang")) {
        $(value).css("display", "inline");
      } else {
        $(value).css("display", "none");
      }
    });
    return this;
  }
}(jQuery));

/* 
Set all li element to hidden
but not li that has [lang="en"]
*/
li[lang]:not(li[lang="en"]) {
  display: none;
}

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

<div class="navigation-navbar collapsed">
  <ul class="navigation-bar navigation-bar-left">
    <li lang="en"><a href="#hero">Home</a></li>
    <li lang="ar"><a href="#hero">الصفحة الرئيسية</a></li>
    <li lang="jp"><a href="#hero">ホームホームة</a></li>
  </ul>
  
  <!-- add checked to the "en" -->
  en: <input type="radio" name="lang" id="en" checked>
  ar: <input type="radio" name="lang" id="ar">
  jp: <input type="radio" name="lang" id="jp">
</div>

使用jQuery点击第一个单选

$("document").ready(function() {
  $("input[type=radio]").change(function() {
    $("li[lang]").languageSwitcher($(this).attr("id"));
  })

  $("input[type=radio]")[0].click(); // add this line
});

(function($) {
  $.fn.languageSwitcher = function(lang) {
    $.each(this, (index, value) => {
      if (lang == $(value).attr("lang")) {
        $(value).css("display", "inline");
      } else {
        $(value).css("display", "none");
      }
    });
    return this;
  }
}(jQuery));

li[lang] {display: none;}

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

<div class="navigation-navbar collapsed">
  <ul class="navigation-bar navigation-bar-left">
    <li lang="en"><a href="#hero">Home</a></li>
    <li lang="ar"><a href="#hero">الصفحة الرئيسية</a></li>
    <li lang="jp"><a href="#hero">ホームホームة</a></li>
  </ul>

  en: <input type="radio" name="lang" id="en" />
  ar: <input type="radio" name="lang" id="ar" />
  jp: <input type="radio" name="lang" id="jp" />
</div>

如何在 jQuery 页面加载时只显示一种语言

How to show only one language when the page load with jQuery

javascript

css

jquery

plugins

translate