刷新更改的下拉菜单javascript [英] Dropdown menu on refresh changes javascript
问题描述
我实现了一个导航栏uisng引导程序4，其中有一个语言下拉菜单，选择后会翻译该页面， 选择下拉语言后，网址将会更改，并且下拉菜单中未显示正确的选择，
I have implemented a navbar uisng bootstrap 4,in which I have a language dropdown, on selection translates the page, When dropdown language is selected, the url will change and dropdown not showing the correct selection ,
我应该进行ajax调用，以不刷新/重新加载页面并更改内容. 请帮助
should I do ajax call for not refresh/reload the page and change the content. Please help
<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>
推荐答案
我对.ejs并不十分熟悉，但是(看看您发表在评论中的其他代码)似乎应该可以通过沿"req.params.lang中选择的语言进行操作，然后将其在您的.ejs-templates中使用.
I'm not super familiar with .ejs, but (looking at the other code you posted in your comment) it seems like you should be able to "pass along" the selected language from req.params.lang and then have it available in your .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中.使用<%= yourVariableNameHere %>语法
And then in your header.ejs. You should have selectedLanguageName available to you, using the <%= yourVariableNameHere %> syntax
<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
I found some useful information in this tutorial: https://scotch.io/tutorials/use-ejs-to-template-your-node-application
由于index.ejs作为部分"包含在内，您可能必须在包含变量时将其显式传递给它.
It's possible that because index.ejs is includes as a "partial" you have to explicitly pass down the variable to it when you include it.
<%- include('header.ejs', {selectedLanguageName: selectedLanguageName}); %>
或类似的东西.
Ejs似乎有相当不错的基础文档，值得一提的是 https://ejs.co/#docs
Ejs seems to have pretty good documentation for the basics, it's propably worth checking out https://ejs.co/#docs
这篇关于刷新更改的下拉菜单javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
