HTML - 使用element.lang更改语言

Question

HTML - 使用element.lang更改语言

10

这是我在 StackOverflow 上的第一个问题，太棒了！我正在尝试开发一种新的方法（显然是因为我在网上没有找到解决方案，可能是因为它不可能），使用 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属性为每种语言添加标签，如英语文本周围的标签，以及其他任何具有自己lang属性的语言。

我尝试使用：

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

这似乎不起作用。

有什么想法吗？

非常感谢， Shay

- Shay Stibelman

为什么不制作两个样式表，在更改语言时禁用当前样式表并启用另一个样式表呢？ - xiaoyi

我只是想看看是否有更简单的方法来更改语言。无论如何，我不会仅仅为了隐藏和显示一个标签而更改样式表，我会创建一个不同的页面并加载它，这应该更容易，对吧？ - Shay Stibelman

不同的样式表可以更快地工作，并支持在调用切换后动态添加元素。如果您的查询在页面上找到每个出现的元素，那么请想象一下那里有成千上万个元素，与交换样式表操作相比，它可能会非常缓慢。 - xiaoyi

我会立即尝试。如果有效，我会告诉你并请你将其编写为答案，谢谢！ - Shay Stibelman

已经给你一个答案，一个更简短的版本。请看下面。 - xiaoyi

3个回答

2

这是错误的：

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

没有"display"属性，可以使用以下属性替代：

$('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。 "inherit"并不意味着"default"，它意味着“从父级继承此属性”，这很可能是block。 <a>的默认显示为inline。

- Wesley Murch

非常感谢你，Wesley，但我会选择xiaoyi的答案，因为它只使用了CSS而没有JS，正如我最初希望做的那样（并且认为JS是必要的）。 - Shay Stibelman

是的，我会使用另一种方法，只是想让你知道为什么你的代码不起作用。 - Wesley Murch

这正是我来到这里向众多聪明的大脑请教的原因 :) - Shay Stibelman

你应该学会使用这些工具，以便自己调试：http://getfirebug.com/ https://developers.google.com/chrome-developer-tools/docs/console http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx - Wesley Murch

2

你是否已经关闭了与“click”之间的括号？

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

- obl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xiaoyi · Accepted Answer

当您的页面加载带有 <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';
};

哪个更优雅，而且速度更快。

演示：http://jsfiddle.net/Gw4eQ/

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

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