La primera pregunta de la pila, así que hurra para mí!
Estoy tratando de desarrollar una nueva manera (aparentemente, ya que no he visto solución a esta línea, quizás cos no es posible) para cambiar el idioma de HTML escrito los elementos usando JS y el lang de la propiedad.

Básicamente, he creado varias etiquetas con el lang de la propiedad en cada uno de ellos, por lo que dar la certeza de lang valor de la pantalla de -ninguno-, esconde, y un valor de heredar a mostrar.
De esa manera, la utilización de la línea:

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

Puedo ver una lengua en un momento. Y que funciona!

Ahora, he creado una

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

etiqueta alrededor del texto en inglés, y lo mismo con cualquier otro idioma, con su propio lang propiedad.
He tratado de usar:

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

Que no parece funcionar.

Alguna idea?

Muchísimas gracias,
Shay

¿por qué no hacer dos hojas de estilo, deshabilitar actual y permitir que otro uno, a la hora de cambiar de idioma.
Sólo estoy tratando de ver si hay una manera más fácil de cambiar de idioma. En cualquier caso, yo no cambiaría una hoja de estilos para ocultar y mostrar la etiqueta, me gustaría crear una página diferente y hacer que la carga, que debería ser más fácil, ¿no?
diferentes hojas de estilo funciona de manera más rápida, y el apoyo dinámicamente elementos que se añaden después de que usted se llama el interruptor. su consulta se iba a encontrar cada vez que aparece en la página, solo tienes que pensar que hay miles de elementos que hay, podría ser extreemely lento comparar a un intercambio de la hoja de estilos de la operación.
Voy a intentar que fuera de inmediato. En caso de que funciona, yo te digo y te pido que escribo como una respuesta, Gracias!
ya te dio una respuesta, una versión más corta. ver más abajo

OriginalEl autor Shay Stibelman | 2012-11-28

3 Comentarios

  1. 15

    Cuando la carga de su página vienen con un <body class="it">, y todos los :lang(en) etiquetas se oculta.

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

    Y cuando usted necesita para cambiar el idioma, solo tienes que cambiar el className de <body>.

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

    Que es más elegante y más rápido.

    demo: http://jsfiddle.net/Gw4eQ/


    Uso :not selector para poder trabajar con más idiomas. demo

    body:not(.en) :lang(en), 
    body:not(.it) :lang(it), 
    body:not(.fr) :lang(fr) { 
        display: none; 
    }
    increíble, muchas gracias! funciona a la perfección! Funciona incluso con 4 idiomas (había que añadir en el css): jsfiddle.net/Gw4eQ/9
    Ha sido un tiempo desde que he contestado a esta pregunta. Por favor no intente con varios idiomas, se podría dar un infierno en la larga lista de reglas. Trate de usar :no() para acortar la lista.

    OriginalEl autor xiaoyi

  2. 2

    Han de cerrar, haga ‘clic’ con ) ?

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

    OriginalEl autor obl

  3. 1

    Esto es incorrecto:

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

    No hay ningún atributo «display», en lugar de utilizar:

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

    O simplemente:

    $('a:lang(en)').show();
    $('a:lang(it)').hide();

    …pero también hay un error aquí, donde no envuelva su función correctamente:

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

    Debe ser: });

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

    También, yo uso la inline en lugar de inherit. «heredar» no significa «default», que significa «heredar esta propiedad de los padres», que probablemente será block. <a>‘s de visualización predeterminado es inline.

    No, todavía no funciona.
    Me funciona: jsfiddle.net/wZ7Rs creo que es un error de sintaxis.
    Muchas gracias, Wesley, pero yo voy con xiaoyi la respuesta, ya que sólo utiliza css y no js, como inicialmente se esperaba (y de pensamiento js era necesario).
    Sí, me gustaría utilizar otro método, sólo quería saber por qué su código no estaba funcionando.
    que era exactamente la razón por la que vine aquí y le preguntó al gran mente de la colmena 🙂

    OriginalEl autor Wesley Murch

Dejar respuesta

Please enter your comment!
Please enter your name here