使用 jQuery 加载页面时如何仅显示一种语言

Question

i have used a script from jQueryscript.net for translating, I'm using it on prebuilt theme so i think that the theme's css is preventing my code to applay first, in the console i can't see the inline style when the page load, but when i switch the language it dose and it switch perfectly HTML :我使用了来自 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-simple-multi-lang.js: jquery-simple-multi-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));

in the console when the page load, it shows both languages:在页面加载时的控制台中，它显示两种语言：

    <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>

in the console when i use the switcher it applay style perfectly and shows the chosen language:在控制台中，当我使用切换器时，它完美地应用样式并显示所选语言：

 <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

it is because there is no click to any input radio so any li will not visible.这是因为没有点击任何输入电台，所以任何li都将不可见。

To display en onload without javascript modification, change the CSS and add checked to the selected radio要在不修改en的情况下显示加载，请更改 CSS 并将checked的选项添加到选定的收音机

 $("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>

to use jQuery to click first radio使用 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 加载页面时如何仅显示一种语言

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-18 15:13:09

使用 jQuery 加载页面时如何仅显示一种语言

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-18 15:13:09

解决方案1
0 已采纳 2021-03-18 15:13:09