html-изменение языка с помощью элемента.ленг

первый вопрос на стек, так что ура мне! Я пытаюсь разработать новый способ (по-видимому, поскольку я не видел решения для этого в интернете, возможно, потому, что это невозможно) изменить язык HTML-элементов с помощью JS и свойства lang.

В основном, я создал несколько тегов со свойством 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');
           };

который не работает.

какие идеи?

спасибо, Шай

8
html javascript lang

3 ответов

при загрузке страницы приходят с <body class="it">, и все :lang(en) теги будут скрыты.

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

и если вам нужно изменить язык, просто измените className of <body>.

$("#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; 
}
14

вы закрыли "click" с ) ?

$("#en").click(function(){
       $('a:lang(en)').css('display', 'inherit');
       $('a:lang(it)').css('display', 'none');
 });
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. "наследовать "не означает" по умолчанию", это означает" наследовать это свойство от родителя", который, вероятно, будет block. <a>по умолчанию дисплей inline.

1