javascript - html - 使用 element.lang 更改语言

Question

堆栈上的第一个问题，所以向我欢呼！我正在尝试开发一种新方法（显然，因为我在网上没有看到解决方案，也许因为它不可能）使用 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');
           };

这似乎不起作用。

有任何想法吗？

非常感谢，谢伊

score 21 · Accepted Answer

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

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

当您需要更改语言时，只需更改className.<body>

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

哪个更优雅，速度更快。

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

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

score 2 · Accepted Answer

这是不正确的：

$('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。

score 2 · Accepted Answer

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

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

3 回答 3