Question

我通常使用JavaScript进行UI /交互，我试图通过编写更复杂的JS来提高我的技能。

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

我知道这很糟糕，但我已经花了好几个小时而且我被困住了。如果有人能提供可以帮助我推进的信息，我将非常感激。

我的所有变量都未使用，这是因为我认为我可以使用点表示法在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中的Object引用（原始vs对象）。特别是，在函数内部使用关键字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);

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

一个JavaScript函数，用于根据国家/地区语言填充innerHTML

2 个答案: