基于国家语言填充 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

当您将对象分配给变量时，您正在传递一个引用。当您将原语分配给变量时，您就是在传递它的值！

Answer 2

看起来您走在正确的轨道上，但有几种方法可以解决这个问题。首先，当您调用Language 函数时，您不需要传递对象的每个值。您可以简单地遍历对象并将每个值分配给 DOM 中每个部分的 innerHTML：

Language(content) {
  for (key in content) {
    this[key] = content[key];
  }
}

这应该会清理一些东西。下一个问题是您没有将任何上下文绑定到 Language 函数。只需调用this[key] 即可在窗口中查找密钥，因为this 已按写入方式绑定到窗口。相反，您可以将您定位的 DOM 元素作为参数传递：

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

Language(content, targets) {
  for (key in content) {
    target[key].innerHTML = content[key];
  }
}

Language(ENcontent, targets);

我希望这有助于并回答您的问题！