我遇到了一个问题,我成功地翻译了导航栏.现在,我已经成功地翻译了页面的所有内容,但我有一个我自己无法解决的问题.问题是:当我将页面的语言从"英语"切换到"拉脱维亚语"时,所有<a hrefs>种语言都会导致其他页面和css样式消失.翻译后,拉脱维亚语版本在导航栏中变成纯文本,但标题和段落保持不变.有人能帮我解决这个问题吗?

        const langEl = document.querySelector('.langWrap');
        const link = document.querySelectorAll('a');
        const titleEl = document.querySelector('.headings');
        const descrEl = document.querySelector('.description');
        const aboutUsEl = document.querySelector('.aboutus');
        const newsEl = document.querySelector('.news');
        const resultsEl = document.querySelector('.results');
        const leaguesEl = document.querySelector('.leagues');
        const loginEl = document.querySelector('.login');


        link.forEach(el => {
            el.addEventListener('click', () => {
                langEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                titleEl.textContent = data[attr].headings;
                descrEl.textContent = data[attr].description;
                aboutUsEl.textContent = data[attr].aboutus;
                newsEl.textContent = data[attr].news;
                resultsEl.textContent = data[attr].results;
                leaguesEl.textContent = data[attr].leagues;
                loginEl.textContent = data[attr].login;
            });
        });
var data = {
    "english": 
    {
    "aboutus":"About Us",
    "news":"News",
    "results":"Results",
    "leagues":"Leagues",
     "login":"Profile",
      "headings": "News",
      "description": 
          "Last weekend there were a lot of great games."
    },
    "latvian": 
    {
        "Aboutus":"Par mums",
         "news":"Jaunumi",
        "results":"Rezultāti",
        "leagues":"līgas",
        "login":"profils",
        "headings": "Jaunumi",
         "description": 
            "Pagājušajā nedēļā bija ļoti daudz labu spēļu"
    }
  }
<div class="langWrap">
            <a href='#' language='english' class="active">EN</a>
            <a href='#' language='latvian'>LV</a>
</div>
<div class="content">
    <header id="up">
        <img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo">
        <div class="container">
            <nav>
                <ul>
                    <li class="aboutus"><a href="/">About Us</a></li>
                    <li class="news"><a href="news">News</a></li>
                    <li class="results"><a href="results">Results</a></li>
                    <li class="leagues"><a href="leagues">Leagues</a></li>
                    <li class="login"><a href="login">Profile</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <h1 class="headings"> News</h1>
    <p class="description">Last weekend there were a lot of great games.
    </p>
</div> 

推荐答案

这里只需将 Select 器更改为标记

const langEl = document.querySelector('.langWrap');
        const link = document.querySelectorAll('a');
        const titleEl = document.querySelector('.headings');
        const descrEl = document.querySelector('.description');
        const aboutUsEl = document.querySelector('.aboutus a');
        const newsEl = document.querySelector('.news a');
        const resultsEl = document.querySelector('.results a');
        const leaguesEl = document.querySelector('.leagues a');
        const loginEl = document.querySelector('.login a');


        link.forEach(el => {
            el.addEventListener('click', () => {
                langEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                titleEl.textContent = data[attr].headings;
                descrEl.textContent = data[attr].description;
                aboutUsEl.textContent = data[attr].aboutus;
                newsEl.textContent = data[attr].news;
                resultsEl.textContent = data[attr].results;
                leaguesEl.textContent = data[attr].leagues;
                loginEl.textContent = data[attr].login;
            });
        });
var data = {
    "english": 
    {
    "aboutus":"About Us",
    "news":"News",
    "results":"Results",
    "leagues":"Leagues",
     "login":"Profile",
      "headings": "News",
      "description": 
          "Last weekend there were a lot of great games."
    },
    "latvian": 
    {
        "aboutus":"Par mums",
         "news":"Jaunumi",
        "results":"Rezultāti",
        "leagues":"līgas",
        "login":"profils",
        "headings": "Jaunumi",
         "description": 
            "Pagājušajā nedēļā bija ļoti daudz labu spēļu"
    }
  }
<div class="langWrap">
            <a href='#' language='english' class="active">EN</a>
            <a href='#' language='latvian'>LV</a>
</div>
<div class="content">
    <header id="up">
        <img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo">
        <div class="container">
            <nav>
                <ul>
                    <li class="aboutus"><a href="/">About Us</a></li>
                    <li class="news"><a href="news">News</a></li>
                    <li class="results"><a href="results">Results</a></li>
                    <li class="leagues"><a href="leagues">Leagues</a></li>
                    <li class="login"><a href="login">Profile</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <h1 class="headings"> News</h1>
    <p class="description">Last weekend there were a lot of great games.
    </p>
</div>

Javascript相关问答推荐

JQuery. show()工作,但. hide()不工作

为什么我的列表直到下一次提交才更新值/onChange

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

JQuery Click事件不适用于动态创建的按钮

如何发送从REST Api收到的PNG数据响应

当用户点击保存按钮时,如何实现任务的更改?

当标题被点击时,如何使内容出现在另一个div上?

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

使用jQuery find()获取元素的属性

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态?

通过跳过某些元素的对象进行映射

每隔3个项目交替显示,然后每1个项目交替显示

如何在TransformControls模式下只保留箭头进行翻译?

Firebase函数中的FireStore WHERE子句无法执行

AstroJS混合模式服务器终结点返回404

递归地将JSON对象的内容上移一级

Google OAuth 2.0库和跨域开放程序的问题-策略错误

Playwright:ReferenceError:browserContext未定义

已在EventListener中更新/更改异步的React.js状态对象,但不会导致组件重新呈现

如何使用属性访问器定义循环的for...的局部变量