Javascript html - 使用 element.lang 更改语言
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13606290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html - change language using element.lang
提问by Shay Stibelman
First question on stack, so hurray to me! I'm trying to develop a new way (apparently, since I've seen no solution to this online, perhaps cos it's not possible) to change the language of HTML written elements using JS and the lang property.
关于堆栈的第一个问题，所以快点给我！我正在尝试开发一种新方法（显然，因为我在网上没有看到任何解决方案，也许是不可能的）来使用 JS 和 lang 属性更改 HTML 编写元素的语言。
Basically, I have created multiple tags with the lang property in each of them, so that giving the certain lang a display value of -none-, hides it, and a value of -inherit- to show it. In that way, using the line:
基本上，我已经在每个标签中创建了多个带有 lang 属性的标签，以便为特定的 lang 指定 -none- 的显示值，将其隐藏，并使用 -inherit- 的值来显示它。这样，使用该行：
a:lang(en),p:lang(en) { display : none }
a:lang(it),p:lang(it) { display : inherit }
I can see one language at a time. And that works!
我一次只能看到一种语言。这有效！
Now, I have created an
现在，我创建了一个
<a href="" lang="en" id="en"> word </a>
tag around the english text, and the same with any other language with their own lang property. I have tried to use:
在英文文本周围标记，并且与具有自己的 lang 属性的任何其他语言相同。我曾尝试使用：
$("#en").click(function(){
$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');
};
Which doesn't seem to work.
这似乎不起作用。
Any ideas?
有任何想法吗？
Thanks a bunch, Shay
非常感谢，谢伊
回答by xiaoyi
When load your page come with a <body class="it">, and all the :lang(en)tags will be hidden.
加载页面时带有<body class="it">，所有:lang(en)标签都将被隐藏。
body.en :lang(it) {
display: none;
}
body.it :lang(en) {
display: none;
}
And when you need to change the language, simply change the classNameof <body>.
而当你需要更改语言，只需更改className的<body>。
$("#en").click(function(){
document.body.className = 'en';
};
Which is more elegant, and way faster.
哪个更优雅，更快。
demo: http://jsfiddle.net/Gw4eQ/
演示：http: //jsfiddle.net/Gw4eQ/
Use :notselector to make it work with more languages. demo
使用:not选择器使其适用于更多语言。演示
body:not(.en) :lang(en),
body:not(.it) :lang(it),
body:not(.fr) :lang(fr) {
display: none;
}
回答by Wesley Murch
This is incorrect:
这是不正确的：
$('a:lang(en)').attr('display', 'inherit');
$('a:lang(it)').attr('display', 'none');
There is no attribute "display", instead use:
没有属性“显示”，而是使用：
$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');
Or simply:
或者干脆：
$('a:lang(en)').show();
$('a:lang(it)').hide();
...but you also have an error here where you didn't wrap your function correctly:
...但您在这里也有一个错误，您没有正确包装您的函数：
$("#en").click(function(){
$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');
}; // <---- error
Should be: });
应该： });
$("#en").click(function(){
$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');
}); // <---- fixed
Also, I'd use inlinerather than inherit. "inherit" does not mean "default", it means "inherit this property from the parent", which will probably be block. <a>'s default display is inline.
另外，我会使用inline而不是inherit. “继承”并不意味着“默认”，它意味着“从父级继承这个属性”，这可能是block. <a>的默认显示是inline。
回答by obl
Have you close 'click' with ) ?
你有没有用 ) 关闭“点击”？
$("#en").click(function(){
$('a:lang(en)').css('display', 'inherit');
$('a:lang(it)').css('display', 'none');
});
