刷新更改时的下拉菜单javascript
刷新更改时的下拉菜单javascript
提问于 2019-06-23 22:51:22
我已经实现了一个导航栏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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-24 15:26:41
我对模板不是特别熟悉，但是(看看你在评论中发布的其他代码)似乎你应该能够“传递”从req.params.lang选择的语言，然后在你的.ejs -.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里。您应该可以使用<%= yourVariableNameHere %>语法获得selectedLanguageName
<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
Stack Overflow用户
发布于 2019-06-24 00:15:53
您正在更改页面，所以您正在运行的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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56725013
复制相关文章
相似问题