Traitement multilingue avec JQuery uniquement

Je pense qu'il serait préférable d'utiliser la classe et l'inventeur attribué au lieu d'id pour contrôler la langue multilingue, car si vous avez le même texte deux fois dans la même page, l'identifiant serait cassé car il est unique.

Vous pouvez essayer cette approche:

 $(function() { $(".is_ml").each(function() { $(this).html(label[$(this).attr("ml_label")]["en"]) }) }); 

Tout ce qui est un texte multilingue doit avoir class = "is_ml" et ml_label = "label" où l'étiquette pourrait être "login", par exemple. Avez-vous eu ma démarche?

Ce serait correct si vous avez fermé votre <span> tag 🙂 Vous pouvez également donner à <a> la valeur "id" appropriée.

Un schéma comme celui-ci fonctionnerait pour un très petit site, mais une fois que vous avez beaucoup de pages, de nombreuses formes et de nombreux messages, il sera vraiment difficile de suivre les messages. Vous voudrez probablement examiner une solution de modèle afin de pouvoir incorporer des données dans des messages internationalisés (montants, dates, etc.).

Bien sûr, il y a le problème que les téléspectateurs qui ont désactivé JavaScript n'obtiennent que la langue par défaut fournie par le serveur.

Salut luc.

Je pense que la meilleure façon est de le faire dans une sorte de backend: P Mais puisque vous demandez une version jQuery, j'utiliserais le langage le plus utilisé dans le HTML et le remplacer par l'autre (s). Je le ferais comme ceci:

Démo ici: http://jsfiddle.net/mHAHz/1/ (cliquez sur fr ou de pour changer la langue)

 var translation, translate; translation = { //store your translations in a object. "fr": { "div > a:eq(0)": "un lien", // this way you are flexible (don't need to use abd id for all you contents you want to translate) "div h1" : "un title", "p" : "du contenu" }, "de": { "div > a:eq(0)": "ein Link", "div h1" : "ein Titel", "p" : "eigen Inhalt" } } translate = function( lng,translationObj ){ //check if lng is provided and if it acually exists in the object. if( lng && translationObj[lng] ) { return $.each(translationObj[lng], function(k,v){ $(k).text(v); }); }else{ return $.error("make the language (lng) exists in your object"); } } translate("fr", translation); 

Je suppose que je serais paresseux de maintenir ces objets avec la langue, alors je voudrais simplement utiliser une classe de langue sur les éléments que je veux traduire … (comme je l'ai fait ici: http://alainbenoit.com/ )

J'aime l'approche de Bernardo Mendes (réponse # 6), mais comme les sous-objets doivent être initialisés, il est préférable de changer les champs ml_label et de langue pour minimiser le nombre de sous-objets qui doivent être initialisés à un seul par langue.

Javascript:

 var label = {}; label['fr'] = {}; label['en'] = {}; label["fr"]["login"]="Connection"; label["en"]["login"]="Login"; label["fr"]["firstname"]="Prénom"; label["en"]["firstname"]="First Name"; label["fr"]["lastname"]="Nom de Famille"; label["en"]["lastname"]="Last Name"; $(function() { $(".is_ml").each(function() { $(this).html(label["en"][$(this).attr("ml_label")]) }) }); 

HTML:

 <label class="is_ml" ml_label="login">Login</label> <label class="is_ml" ml_label="firstname">First Name</label> <label class="is_ml" ml_label="lastname">Last Name</label>