Question

我实现了一个导航栏uisng引导程序4，其中有一个语言下拉菜单，选择后会翻译该页面，选择下拉语言后，网址将会更改，并且下拉菜单未显示正确的选择，

我应该做ajax调用，以不刷新/重新加载页面并更改内容。请帮助

<body>
  <nav>
    <div class="dropdown">
      <button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
        English
      </button>
      <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem();">
        <a class="dropdown-item" href="/en">English</a>
        <a class="dropdown-item" href="/fr">French</a>
      </div>
    </div>
  </nav>
</body>

<script>
 function handleLanguage() {
    document.getElementById("languagelist").click();
  }

  function handleLanguageItem() {
    var element = document.getElementById("languagelist");
    for (var i = 0; i < element.children.length; i++) {
      (function(index) {
        element.children[i].onclick = function() {
          var thetext = element.getElementsByTagName('a')[index].innerHTML;
          var buttonelement = document.getElementById("language")
          buttonelement.innerText = thetext;
        }
      })(i);
    }    
  }

</script>

Answer 1

您正在更改页面，因此单击后运行的javascript不会执行任何操作，应在页面加载时根据路径通过服务器通过服务器更改按钮的文本。但是，这是使用javascript的解决方案（并非最佳选择，因为它需要首先加载页面）：

let languageMap = {
    "en": "English",
    "fr": "French"
};

document.querySelector('#language').innerText = languageMap[location.pathname.substr(1, 2)]; // Get the language short from the 2 first characters after the / in the URL

Answer 2

我对.ejs不太熟悉，但是（看着您发表在评论中的其他代码）似乎应该可以从req.params.lang“传递”所选语言，然后它可以在您的.ejs-templates中使用。

类似的东西：

router.get('/:lang', function (req, res) {
    const languageMap = {
      "en": "English",
      "fr": "French"
    };

    const selectedLang = req.params.lang;
    const name = languageMap[selectedLang];
    // pass the value down to index.ejs which in turn renders header.ejs 
    res.render('index.ejs', { selectedLanguageName: name });
});

然后在您的header.ejs中。您应该使用selectedLanguageName语法为您提供<%= yourVariableNameHere %>

<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
    <%=  selectedLanguageName %>
  </button>
  <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
    <a class="dropdown-item" href="/en">English</a>
    <a class="dropdown-item" href="/fr">French</a>
  </div>

我在本教程中发现了一些有用的信息：https://scotch.io/tutorials/use-ejs-to-template-your-node-application

由于index.ejs包含为“部分”，因此您可能必须在包含变量时将其显式传递给它。

<%- include('header.ejs', {selectedLanguageName: selectedLanguageName}); %>

或类似的东西。

Ejs似乎有相当不错的基础文档，值得一看https://ejs.co/#docs

刷新更改的下拉菜单javascript

2 个答案: