javascript - 根据国家/地区语言填充innerHTML 的JavaScript 函数

Question

我通常使用 JavaScript 来实现 UI/交互目的，并且我正在尝试通过编写更复杂的 JS 来提高我的技能。

我编写了以下代码，试图根据 URL 和国家/地区代码更改我们网站的国家/地区选择器中的内容。

我知道这很残酷，但我花了几个小时，但我被困住了。如果有人可以提供可以帮助我前进的信息，我将非常感激。

我的所有变量都未使用，那是因为我认为我可以使用点符号在 if 语句中调用它们，但事实并非如此。

这是我到目前为止所写的内容。尽量不要笑(或哭)。谢谢你。

//Initialize Variables
var moduleTitle = document.querySelector(".amt-select-title").innerHTML;
var colTitle = document.querySelector(".amt-choose-country-col > h3").innerHTML;
var languageModTitle = document.querySelector(".amt-choose-language > h2").innerHTML;
var investorRelations = document.querySelector(".amt-utility-3 a").innerHTML;
var company = document.querySelector(".amt-utility-4 a").innerHTML;
var corporateResponsibility = document.querySelector(".amt-utility-5 a").innerHTML;
var careers = document.querySelector(".amt-utility-6 a").innerHTML;
var contactUs = document.querySelector(".amt-utility-7 a").innerHTML;

// This is my library of objects -- one for each language -- EN, ES, PT and DE
var ENcontent = {
moduleTitle : "English Module Title",
colTitle : "English Title",
languageModTitle : "Choose Language EN Title",
investorRelations : "Investor Relations",
company : "Company",
corporateResponsibility : "Corporate Responsbility",
careers : "Careers",
contactUs : "Contact Us"    
};
var EScontent = {
    moduleTitle : "Spanish Module Title",
    colTitle : "Spanish Title",
    languageModTitle : "Choose Language ES Title",
    investorRelations : "Relaciones con Inversionistas",
    company : "Empresa",
    corporateResponsibility : "Responsabilidad Corporativa",
    careers : "Oportunidades Laborales",
    contactUs : "Contáctanos"    
};
var PTcontent = {
    moduleTitle : "Portuguese Module Title",
    colTitle : "Portuguese Title",
    languageModTitle : "Choose Language PT Title",
    investorRelations : "Investidores",
    company : "Empresa",
    corporateResponsibility : "Responsabilidade Corporativa",
    careers : "Carreiras",
    contactUs : "Fale Conosco"    
};

var DEcontent = {
    moduleTitle : "German Module Title",
    colTitle : "German Title",
    languageModTitle : "Choose Language DE Title",
    investorRelations : "Investor Relations",
    company : "Unternehmen",
    corporateResponsibility : "Corporate Responsbility",
    careers : "Karriere",
    contactUs : "Kontakt"    
};

//Language Object
function Language(moduleTitle, colTitle, languageModTitle, investorRelations, company, corporateResponsibility, careers, contactUs) {      
this.moduleTitle = moduleTitle,
this.colTitle = colTitle,
this.languageModTitle = languageModTitle,
this.investorRelations = investorRelations,
this.company = company,
this.corporateResponsibility = corporateResponsibility,
this.careers = careers,
this.contactUs = contactUs;    
}

//Calling Language() function using arguments based on country -- What's a good way to do this? 
if(window.location.href.indexOf("/en") > -1) {
Language( 
    ENcontent.moduleTitle, 
        ENcontent.colTitle, 
        ENcontent.languageModTitle, 
        ENcontent.investorRelations, 
        ENcontent.company, 
        ENcontent.corporateResponsibility, 
        ENcontent.careers, 
        ENcontent.contactUs);
}else if(window.location.href.indexOf("/es") > -1) {
    Language(
        EScontent.moduleTitle, 
        EScontent.colTitle, 
        EScontent.languageModTitle, 
        EScontent.investorRelations, 
        EScontent.company, 
        EScontent.corporateResponsibility, 
        EScontent.careers, EScontent.contactUs);
}else if(window.location.href.indexOf("/pt") > -1) {
    Language( 
        PTcontent.moduleTitle, 
        PTcontent.colTitle,  
        PTcontent.languageModTitle,  
        PTcontent.investorRelations,  
        PTcontent.company,  
        PTcontent.corporateResponsibility,  
        PTcontent.careers,  
        PTcontent.contactUs);
}else if(window.location.href.indexOf("/de") > -1) {
    Language(
        DEcontent.moduleTitle, 
        DEcontent.colTitle,  
        DEcontent.languageModTitle,  
        DEcontent.investorRelations,  
        DEcontent.company,  
        DEcontent.corporateResponsibility,  
        DEcontent.careers,  
        DEcontent.contactUs);
}

Answer 1

首先，我将为您提供一个快速解决方案。像这样编写您的 Language 函数:

function Language(moduleTitle, colTitle, languageModTitle, investorRelations, company, corporateResponsibility, careers, contactUs) {      
 document.querySelector(".amt-select-title").innerHTML = moduleTitle,
 document.querySelector(".amt-choose-country-col > h3").innerHTML = colTitle,
 document.querySelector(".amt-choose-language > h2").innerHTML = languageModTitle,
 document.querySelector(".amt-utility-3 a").innerHTML = investorRelations,
 document.querySelector(".amt-utility-4 a").innerHTML = company,
 document.querySelector(".amt-utility-5 a").innerHTML = corporateResponsibility,
 document.querySelector(".amt-utility-6 a").innerHTML = careers,
 document.querySelector(".amt-utility-7 a").innerHTML = contactUs;   

}

这应该相应地更新页面。但是，您可能想研究 JS 中的对象引用(原始与对象)。特别是在函数内部使用关键字 this 和 window 属性(全局对象)时。例如:

var obj = {a: "Hello"};
var str = obj.a; // str === obj.a returns true
str = "World" // str === obj.a returns false

这是因为 obj.a 未链接到 str。我们只是传递实际值。

但是，请注意这有何不同:

var obj1 = {a: "Hello"};
var obj2 = obj1; // obj2.a === obj1.a returns true
obj2.a = "World" // obj2.a === obj1.a  STILL returns true

当您将对象分配给变量时，您正在传递一个引用。当您将基元分配给变量时，您正在传递它的值!