html - 使用 element.lang 更改语言答案

【问题标题】：html - change language using element.langhtml - 使用 element.lang 更改语言
【发布时间】：2015-02-21 09:09:24
【问题描述】：

堆栈上的第一个问题，所以向我欢呼！我正在尝试开发一种新方法（显然，因为我在网上没有看到解决此问题的方法，也许因为不可能）来使用 JS 和 lang 属性更改 HTML 编写元素的语言。

基本上，我已经创建了多个标签，每个标签都带有 lang 属性，因此给特定的 lang 一个显示值 -none-，隐藏它，并给它一个值 -inherit- 来显示它。这样，使用以下行：

a:lang(en),p:lang(en) { display : none }
a:lang(it),p:lang(it) { display : inherit }

我一次只能看到一种语言。这行得通！

现在，我创建了一个

<a href="" lang="en" id="en"> word </a>

在英文文本周围标记，与任何其他具有自己的 lang 属性的语言相同。我试过用：

$("#en").click(function(){
           $('a:lang(en)').css('display', 'inherit');
           $('a:lang(it)').css('display', 'none');
           };

这似乎不起作用。

有什么想法吗？

非常感谢，谢伊

【问题讨论】：

【解决方案1】：

加载页面时带有<body class="it">，所有:lang(en)标签都将被隐藏。

body.en :lang(it) {
  display: none;
}
body.it :lang(en) {
  display: none;
}

而当您需要更改语言时，只需更改<body> 的className。

$("#en").click(function(){
  document.body.className = 'en';
};

哪个更优雅，速度更快。

使用:not 选择器使其适用于更多语言。 demo

body:not(.en) :lang(en), 
body:not(.it) :lang(it), 
body:not(.fr) :lang(fr) { 
    display: none; 
}

【讨论】：

【解决方案2】：

您是否使用 ) 关闭了“点击”？

$("#en").click(function(){
       $('a:lang(en)').css('display', 'inherit');
       $('a:lang(it)').css('display', 'none');
 });

【讨论】：

【解决方案3】：

这是不正确的：

$('a:lang(en)').attr('display', 'inherit');
$('a:lang(it)').attr('display', 'none');

没有“显示”属性，而是使用：

$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');

或者简单地说：

$('a:lang(en)').show();
$('a:lang(it)').hide();

...但是你也有一个错误，你没有正确包装你的函数：

$("#en").click(function(){
    $('a:lang(en)').css('display', 'inherit');
    $('a:lang(it)').css('display', 'none');
}; // <---- error

应该是：});

$("#en").click(function(){
    $('a:lang(en)').css('display', 'inherit');
    $('a:lang(it)').css('display', 'none');
}); // <---- fixed

另外，我会使用inline 而不是inherit。 “继承”不是“默认”的意思，而是“从父级继承这个属性”，大概是block。 <a>的默认显示是inline。

【讨论】：

非常感谢你，韦斯利，但我会用小义的回答，因为它只使用 css 而没有 js，正如我最初希望的那样（并且认为 js 是必要的）。
是的，我会使用另一种方法，只是想让您知道为什么您的代码无法正常工作。
这正是我来这里询问伟大蜂巢思维的原因:)
你应该学会使用这样的工具，这样你就可以自己调试了：getfirebug.com developers.google.com/chrome-developer-tools/docs/console msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx