我已经实现了一个导航栏 uisng bootstrap 4,其中我有一个语言下拉菜单,在选择时翻译页面, 选择下拉语言时,url 会发生变化,下拉菜单不会显示正确的选择,
我是否应该执行 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>
最佳答案
我对 .ejs 不是很熟悉,但是(查看您在评论中发布的其他代码)似乎您应该能够“传递”来自 req.params.lang
的所选语言。然后在您的 .ejs 模板中提供它。
类似于:
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 - 刷新下拉菜单更改javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56725013/