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');
           };

这似乎不起作用。

有什么想法吗？

非常感谢，吉文

Answer 1

加载您的信息页时，会<body class="it">，并且所有:lang(en)标记都会被隐藏。

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

当您需要更改语言时，只需更改className的{{1}}。

<body>

哪个更优雅，速度更快。

使用$("#en").click(function(){ document.body.className = 'en'; };选择器使其可以使用更多语言。 demo

:not

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

Answer 3

您是否关闭了“点击”？

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