const navTitle = document.querySelectorAll(".nav-sec"); const subTitle = document.querySelector(".subtitle"); const artTexts = document.querySelectorAll(".art-text"); const sectionTitles = document.querySelectorAll(".section_title"); const footerContent = document.querySelector(".footer_content"); const projectsTitle = document.querySelectorAll(".title-project"); const projectsDescription = document.querySelectorAll(".desc-project"); const aboutTitle = document.querySelectorAll(".about_title"); const contactContent = document.querySelector(".contact_content"); const aboutContent = document.querySelectorAll(".about_content"); btnLang.addEventListener("click", () => { const attr = (btnEnglish.classList.contains("hiddden") ? btnPortuguese : btnEnglish).getAttribute("language"); navTitle.forEach((el, index) => (el.textContent = data[attr].navbar[index])); sectionTitles.forEach((title, index) => (title.textContent = data[attr].navbar[index])); projectsTitle.forEach((project_titles, index) => (project_titles.textContent = data[attr].project_titles[index])); projectsDescription.forEach((project_description, index) => (project_description.textContent = data[attr].project_description[index])); aboutTitle.forEach((about_title, index) => (about_title.textContent = data[attr].about_title[index])); aboutContent.forEach((about_content, index) => (about_content.textContent = data[attr].about_content[index])); contactContent.textContent = data[attr].contact_content; subTitle.textContent = data[attr].subtitle; footerContent.textContent = data[attr].footer_content; });Soy benninger y sé que cuando te repites demasiado, probablemente puedas simplificar las cosas. Pero, ¿cómo puedo abordar algo como este código? SECO ftw.
Suponiendo que tiene la misma cantidad de elementos de matriz en data que los elementos coincidentes en el DOM, un enfoque es usar una matriz de selectores, cada uno de los cuales está vinculado al nombre de la propiedad asociada en los datos. Repita los selectores y las propiedades del idioma, luego recorra cada elemento que coincida con el selector para asignar el mismo índice de la propiedad del idioma.
const selectorsByLangProp = [ ['navbar', '.nav-sec'], ['navbar', '.section_title'], ['project_titles', '.title-project'], ['project_description', '.desc-project'], ['about_title', '.about_title'], ['about_content', '.about_content'], ]; btnLang.addEventListener("click", () => { const attr = (btnEnglish.classList.contains("hiddden") ? btnPortuguese : btnEnglish).getAttribute("language"); const langData = data[attr]; for (const [langProp, selector] of selectorsByLangProp) { document.querySelectorAll(selector).forEach((elm, i) => { elm.textContent = langData[langProp][i]; }); } contactContent.textContent = langData.contact_content; subTitle.textContent = langData.subtitle; footerContent.textContent = langData.footer_content; });Para páginas más grandes y complicadas, un mejor enfoque para este tipo de cosas sería construir el HTML directamente a partir de los datos, en lugar de tener selectores y propiedades separados. Por ejemplo, con React, uno podría hacer algo similar a lo siguiente:
const Page = ({ langData }) => (<> <div>{langData.subTitle}</div> { langData.sections.map((sectionData) => ( <section> <div>{sectionData.project_title}</div> <div>{sectionData.project_description}</div> </section> )) } <footer>{langData.contact_content} {langData.footer_content}</footer> </>);(Ese no es un código que funcione , pero es un ejemplo de cómo podría ser la implementación de este tipo de cosas)