Question

首先，我想说我有一个网站，我想在不重新加载页面的情况下更改语言。这就是我为EN和DE插入按钮的原因。

<button lang="de" class="btn btn-primary btn-sm language" >DE</button>
<button lang="en" class="btn btn-primary btn-sm language" >EN</button>

此外我的CSS看起来像这样：

 html.en :lang(de) {
  display: none;
}
html.de :lang(en) {
  display: none;
}

那是我的JQuery脚本：

if ($("html").hasClass('de')) {
  $('html').addClass('de');
}
else{
     $('html').addClass('en');  
}

$('.language').click(function(){
($('html').toggleClass('de en'));


    });

最后这是我的html标签：

<html class="">

我的问题是，如果我在一个页面上更改语言，如果我点击指向新页面的链接，它会自动更改。我知道我的JQuery有问题，如果函数。但我真的不知道如何解决这个问题。也许使用JQuery cookies？

Answer 1

是 - 每次加载页面都会产生新的JavaScript范围。如果您需要在页面之间维护任何状态，则需要使用cookie或在页面之间的URL上附加一些内容。（即使使用服务器端组件，通常还需要客户端标识符来保持服务器关联的会话ID。）

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API也可能是有意义的。

Answer 2

您可以在客户端使用查询字符串轻松完成此操作。您可以将查询字符串附加到URL的末尾，如下所示：

?lang=en

然后在你的javascript中你可以解析出查询字符串并相应地处理。虽然有很好的库可以解析查询字符串（like this），但这里有一个非常简单的JS来获取查询字符串。仅当有一个查询字符串时，此ONLY才有效。如果您计划将来使用更多查询字符串，则需要更好地实现。

var language = location.search.replace(/^.*?\=/, '');

Answer 3

要跟踪当前区域设置，最佳做法是在网址中设置它，这种方法允许用户在需要时切换lang。

如果您无法保留网址上的lang，您可以考虑使用WebStorage ... 尝试这样的事情：

＆＃13;

var I18nService = (function($, storage) {
  var STORAGE_KEY = 'MY_SITE_CURRENTLOCALE';
  function I18nService() {
    $(document).ready(function() {
      this.setCurrent(this.current);
    });
  }
  
  I18nService.prototype.available = ['en', 'de']
  I18nService.prototype.current = (function() {
    var res = this.available[0];
    var previous = this.getStored();
    
    if(previous) {
      res = previous;
    }
    
    return res;
  })();

  I18nService.prototype.getStored = function() {
    return storage.getItem(STORAGE_KEY);
  };

  I18nService.prototype.store = function() {
    storage.setItem(STORAGE_KEY, this.current);
    return this;
  };

  I18nService.prototype.setCurrent = function(newVal) {
    this.current = newVal;
    return this.store().updateClasses();
  };

  
  I18nService.prototype.getCurrent = function() {
    return this.current;
  };

  I18nService.prototype.updateClasses = function() {
    $('html').removeClass(this.available.join(' ')).addClass(this.current);
    
    return this;
  };
  
  return new I18nService();
})(jQuery, window.localStorage.bind(window) /* or sessionStorage, dependes on what you need */);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 4

您可以禁用按钮以防止重新加载页面，因为您不需要重新加载此页面

$('.language').click(function(e){
($('html').toggleClass('de en'));
     e.preventDefault();  
    });

如何在JQuery中存储全局变量？

4 个答案: