0

ユーザーに郵便番号、都道府県、住所を入力するよう求めるフォームを作成する必要があります。ただし、最初に、ユーザーが で言語を選択できるようにし<select>、ラベルと選択オプション (タイトルなど) を選択した言語で設定する必要があります。

言語の後に、短いリストから自分の国を選択できる必要があります。もちろん、郵便番号の正規表現検証は、選択した国と一致する必要があります。

プラグインなしでやりたい。それを行う最もクリーンな方法は何ですか？

これまでに私が考えたこと：

//Get the selected language and country
function which(){
    lang = $('#language').prop('selectedIndex');
    country = $('#country').prop('selectedIndex');
    if(lang == 1){
        pickedLang = "en";
    }else if(lang == 2){
        pickedLang = "de";
    }else if(lang == 3){
        pickedLang = "fr";
    }

    if(country == 1){
        pickedCountry = "US";
    }else if(country == 2){
        pickedCountry = "UK";
    }else if(country == 3){
        pickedCountry = "DE";
    }else if(country == 4){
        pickedCountry = "FR";
    }else{
        pickedCountry = 0;
    }
}

次に、選択した言語に合わせてラベルとオプションを変更します。

$('#language').change(function(){
    if(pickedLang == "en"){
        $('.country label').text('Country');
        $('.language label').text('Language');
        $('#country option').eq(0).text('Pick a country');
        $('#country option').eq(1).text('United States');
        $('#country option').eq(2).text('United Kingdom');
        $('#country option').eq(3).text('Germany');
        $('#country option').eq(4).text('France');

        $('.gender label').text('Title');
        $('#gender option').eq(0).text('Choose...');
        $('#gender option').eq(1).text('Mr.');
        $('#gender option').eq(2).text('Ms.');
        $('#gender option').eq(3).text('Miss');

        $('.name label').text('Name:');
        $('.first-name label').text('First name:');
        $('.street label').text('Street:');
        $('.number label').text('Number:');
        if(pickedCountry == "UK"){
            $('.postcode label').text('Post Code:');
        }else{
            $('.postcode label').text('Zip Code:');
        }
        $('.state label').text('State:');
        $('.city label').text('City:');
    }else if [...]

しかし、これはどういうわけか単純化され、よりクリーンになる可能性があると本当に感じています。

編集: Nicklas のおかげで、コードをクリーンアップし、JSON を使用してすべてのラベルを異なる言語で保存することにしました。

{
"en": [
{
    "languageLabel":    "Language",
    "countryLabel":     "Country",
    "nameLabel":        "Name",
    "emailLabel":       "E-mail",
    "streetLabel":      "Street",
    "nbrLabel":         "N°",
    "zipLabel":         "Zip",
    "stateLabel":       "State",
    "cityLabel":        "City",
    "sendLabel":        "Send"  
}
],

"fr": [
{
    "languageLabel":    "Langue",
    "countryLabel":     "Pays",
    "nameLabel":        "Nom",
    "emailLabel":       "Adresse e-mail",
    "streetLabel":      "Rue",
    "nbrLabel":         "N°",
    "zipLabel":         "CP",
    "stateLabel":       "Province",
    "cityLabel":        "Ville",
    "sendLabel":        "Envoyer"   
}
],

"de": [
{
    "languageLabel":    "Sprache",
    "countryLabel":     "Land",
    "nameLabel":        "Name",
    "emailLabel":       "E-Mail-Adresse",
    "streetLabel":      "Straße",
    "nbrLabel":         "N°",
    "zipLabel":         "PLZ",
    "stateLabel":       "Staat",
    "cityLabel":        "Stadt",
    "sendLabel":        "Senden"    
}
]
}

jQuery:

var labels;
    $.getJSON("path-to-json-file",function(data){
            labels=data;
    }); 


    ////////// DETECT CHANGES IN THE SELECTBOXES
    $('#language, #country').change(function(){
        which();
        var currentLabels = labels[pickedLanguage];
        $('#language-container label').text(currentLabels.languageLabel);
        $('#country-container label').text(currentLabels.countryLabel);
    });

ただし、コンソールはエラーを返し、undefined のプロパティ 'fr' (またはその他の言語) を読み取れないことを示します。私は JSON の使い方にまったく慣れていないので、どこかで失敗したのではないかと思います。

4

1 に答える 1

2

すべての変数の辞書を作成して、これをクリーンアップしてみてください。

var langOptions = {
    en: {
        countryLabel:  'Country',
        languageLabel: 'Language',

        ...
    }
}

次に、適切なものにアクセスする必要がある場合:

var myOptions = langOptions[pickedLang];

次に、無限のifステートメントなしで、常に同じ方法でそれらにアクセスできます。

$('.country label').text(myOptions.countryLabel);
$('.language label').text(myOptions.languageLabel);

さらに、langOptionsオブジェクトを json 形式で隠しておき、 jQuery.getJSON(). これにより、はるかにクリーンなコードが作成されるはずです。

編集: 明確にするための使用例: http://jsfiddle.net/9Npg2/

于 2013-08-03T11:17:50.683 に答える