web-dev-qa-db-ja.com

html-element.langを使用して言語を変更します

スタックの最初の質問です。私は、JSとlangプロパティを使用してHTMLで記述された要素の言語を変更する新しい方法を開発しようとしています（明らかに、これに対する解決策をオンラインで見たことがないので、おそらく不可能です）。

基本的に、それぞれにlangプロパティを持つ複数のタグを作成しました。そのため、特定のlangに-none-の表示値を指定し、非表示にし、-inherit-の値を指定して表示します。そのように、次の行を使用します。

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

一度に1つの言語を見ることができます。そしてそれはうまくいきます！

今、私は作成しました

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

英語のテキストの周りにタグを付け、独自のlangプロパティを持つ他の言語でも同じです。私は使用しようとしました：

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

これはうまくいかないようです。

何か案は？

たくさんありがとう、シェイ

javascripthtmllang
9
Shay Stibelman

ページを読み込むと、_<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; 
}
_
19
xiaoyi

これは正しくありません：

$('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を使用します。 「継承」は「デフォルト」を意味するのではなく、「親からこのプロパティを継承する」ことを意味します。これはおそらくblockになります。 <a>のデフォルト表示はinlineです。

2
Wesley Murch

）で「クリック」を閉じましたか？

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