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

A JavaScript function to populate innerHTML based on country language

本文关键字：地区 语言 填充 innerHTML 国家 函数 JavaScript 用于 一个      更新时间：2023-09-26

我通常将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);
}

首先，我会为您提供一个快速解决方案。按如下方式编写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

将对象分配给变量时，将传递引用。当您将基元分配给变量时，您正在传递其值！

看起来你走在正确的轨道上，但有几种方法可以解决这个问题。首先，当你调用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);

我希望这能帮助并回答您的问题！

相关文章：