html在双语网站中保持语言答案

【问题标题】：html keep language in bilingual sitehtml在双语网站中保持语言
【发布时间】：2020-10-30 02:53:13
【问题描述】：

我正在开发一个双语网站（西班牙语/英语），我听取了第二个答案 in this post 的建议。

这是我用来选择语言的导航栏中的代码：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span lang="es">Idioma</span>
        <span lang="en">Language</span>
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown06">
        <a class="dropdown-item coll-navbar language">
            <span lang="es">English</span>
            <span lang="en">Español</span>
        </a>
    </div>
</li>

这是js代码：

$('[lang="en"]').hide();
$('.language').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();
});

这是实现的代码示例：

<div class="title col-12 col-md-8">
    <h2 class="align-center" lang="es"><strong>
            Costura</strong></h2>
    <h2 class="align-center" lang="en"><strong>
            Sewing</strong></h2>
</div>

而且，它很好用，唯一的问题是当我选择第二种语言并更改 html 页面时，它会返回到第一种语言（在这种情况下是西班牙语）；选择后，如何在所有 html 中保留第二语言？

提前致谢，

【问题讨论】：

为什么不在 URL 中使用查询参数？ example.com/page?lang=es您可以通过 JavaScript 访问参数，如下所示：davidwalsh.name/query-string-javascript
我还应该补充一点，您正在使用 Node.js 对其进行标记，但您的代码是 jQuery。您是使用 Node 还是只是制作常规的 HTML 网站，然后上传到 Web 服务器？
感谢 Tony Drummond，我将标签更改为 jQuery - 而且，我正在制作一个常规的 html 网站，然后将其上传到 Web 服务器
如果您只是上传纯 HTML 页面，这必须是一个小型网站。请记住，您还必须更改每个链接。我想你可以编写一个简单的 jQuery 函数，将点击事件添加到所有链接 $("a").click(function(e)....) 然后执行 e.preventDefault()，获取 URL 并通过 JavaScript 修改，然后执行 window.location.replace(url)... 导航到页面。

标签： html jquery

【解决方案1】：

方法一：

您可以使用Jquery Cookie 来保存语言值。

$('[lang="en"]').hide();
$('.language').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();

  if ($.cookie('lang') === 'en') {
     $.cookie('lang', 'es', { expires: 7 });
  } else {
     $.cookie('lang', 'en', { expires: 7 });
  }
});

然后在页面加载时运行以下代码块以检查任何 lang 值：

if ($.cookie('lang')) {
    var lang = $.cookie('lang');
    document.documentElement.setAttribute('lang', lang);
} else {
    document.documentElement.setAttribute('lang', 'en');

方法二：

使用 Local Storage API 解决问题：

<html>
    <head>
        
    </head>

    <body>
        
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span lang="es">Idioma</span>
                <span lang="en">Language</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdown06">
                <a class="dropdown-item coll-navbar language">
                    <span lang="es">English</span>
                    <span lang="en">Español</span>
                </a>
            </div>
        </li>

        <div class="title col-12 col-md-8">
            <h2 class="align-center" lang="es"><strong>
                    Costura</strong></h2>
            <h2 class="align-center" lang="en"><strong>
                    Sewing</strong></h2>
        </div>



    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script type="text/javascript">

        var lang = localStorage.getItem("lang");
        if (lang){
            if (lang == "en"){
                $('[lang="en"]').show();
                $('[lang="es"]').hide();
            }else{
                $('[lang="es"]').show();
                $('[lang="en"]').hide();
            }
        }
        
        
        $('.language').click(function() {
           
            $('[lang="es"]').toggle();
            if (lang === 'en') {
                localStorage.setItem('lang', 'en');
                $('[lang="en"]').show();
                $('[lang="es"]').hide();
            } else {
                localStorage.setItem('lang', 'es');
                $('[lang="es"]').show();
                $('[lang="en"]').hide();
            }
        });
    </script>
    </body>
</html>

【讨论】：

谢谢，我下载了 jquery.cookie.js，在 jQuery 库之后添加了引用，修改了你写的第一部分，但是当页面加载时我无法运行第二部分（我在head中尝试了一个函数，在body末尾的所有js引用之后，在单独的js文件中......），你能告诉我如何运行它吗？
我已经编辑了答案并添加了一个新方法。您也可以使用第二个。
谢谢@Harshana，我使用你的第二种方法来找到我发布的解决方案。

【解决方案2】：

这是我得到的解决方案，它主要基于@HarshanaSerasinghe 2nd answer：

<script type="text/javascript">
    var lang = localStorage.getItem("lang");
    if (lang) {
        if (lang == "en") {
            $('[lang="en"]').show();
            $('[lang="es"]').hide();
        } else {
            $('[lang="es"]').show();
            $('[lang="en"]').hide();
        }
    } else {
        $('[lang="en"]').hide();
        localStorage.setItem('lang', 'es');
    };
    $('.language').click(function() {
        $('[lang="es"]').toggle();
        $('[lang="en"]').toggle();
        if (lang === 'en') {
            localStorage.setItem('lang', 'es');
        } else {
            localStorage.setItem('lang', 'en');
        }
    });
</script>

如果没有点击.language，则lang 中没有值，因此，当我加载显示两种语言的站点时，我通过添加隐藏一种语言并设置值的else 子句解决了这个问题到lang var。 onclick，首先我切换了两种语言，然后我相应地修改了lang中的值。

【讨论】：