Question

我必须创建一个表单，提示用户输入他们的邮政编码，州和街道地址。但首先，用户应该能够在<select>中选择他们的语言，并且标签和选择选项（例如他们的标题）必须使用他们选择的语言进行设置。

在语言之后，他们应该能够在短名单中选择他们的国家，并且Zip代码的正则表达式验证当然必须与所选国家匹配。

我想在没有插件的情况下这样做。最干净的方法是什么？

到目前为止我的想法：

//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);
    });

但是，控制台返回错误并说它无法读取未定义的属性'fr'（或任何其他语言）。因为我根本不熟悉JSON的使用，所以我害怕我搞砸了。

Answer 1

尝试通过输入所有变量的字典来清理它：

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

        ...
    }
}

然后当你需要访问适当的时候：

var myOptions = langOptions[pickedLang];

然后你可以用相同的方式访问它们，而不用无限的if语句：

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

接下来，考虑以json格式存储langOptions对象，并使用jQuery.getJSON()通过ajax加载它。这应该会产生更清晰的代码。

编辑：使用示例，澄清： http://jsfiddle.net/9Npg2/

允许用户选择邮政表单的语言，并在jQuery中相应地调整选择选项

1 个答案: