javascript - 简单的函数只能工作一次(显示/隐藏 div) - vanilla JavaScript
问题描述
我正在开发一个多语言网站。
我希望能够按下一个按钮,所有(包装内容)div的显示变为none
,只有正确的一个变为inline-block
。
有用。但只有一次。问题是什么?请不要使用 JQuery。
编辑向 html 添加了一些代码以使其“易于理解”
JS(toSl、toAn等所有函数都是一样的)。
function toRu () {
var lngs, i;
lngs = document.querySelectorAll(".lng");
for (var i=0;i<lngs.length;i++){
lngs[i].style.display="none";
}
document.getElementById("ru").style.display="inline-block";
}
document.getElementById("slo").addEventListener("click", toSl);
document.getElementById("ang").addEventListener("click", toAn);
document.getElementById("nem").addEventListener("click", toNe);
document.getElementById("ita").addEventListener("click", toIt);
document.getElementById("hrv").addEventListener("click", toHr);
document.getElementById("rus").addEventListener("click", toRu);
HTML
<!DOCTYPE html>
<html>
<body>
<div class="lng" id="sl">
<nav>
<div id="lngSpace">
Language Selector
<input type="button" id="slo" class="zastave" value="Slo">
<input type="button" id="ang" class="zastave" value="Eng">
<input type="button" id="nem" class="zastave" value="Deu">
<input type="button" id="ita" class="zastave" value="Ita">
<input type="button" id="hrv" class="zastave" value="Hrv">
<input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in Sl language
</div>
<div class="lng" id="en">
<nav>
<div id="lngSpace">
Language Selector
<input type="button" id="slo" class="zastave" value="Slo">
<input type="button" id="ang" class="zastave" value="Eng">
<input type="button" id="nem" class="zastave" value="Deu">
<input type="button" id="ita" class="zastave" value="Ita">
<input type="button" id="hrv" class="zastave" value="Hrv">
<input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in En language
</div>
<div class="lng" id="de">
<nav>
<div id="lngSpace">
Language Selector
<input type="button" id="slo" class="zastave" value="Slo">
<input type="button" id="ang" class="zastave" value="Eng">
<input type="button" id="nem" class="zastave" value="Deu">
<input type="button" id="ita" class="zastave" value="Ita">
<input type="button" id="hrv" class="zastave" value="Hrv">
<input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in Ger language
</div>
etc etc
</body>
</html>
编辑我的代码还包含这段 JS,它在一开始就运行。我认为它不会影响 JS 的其余部分,因为我试图只更改 div 的显示而不重新加载页面......但我只是发布它以防万一(正如发布到 plnkr 的示例实际上作品...)
var language = navigator.language || navigator.languages[0];
console.log(language);
var languageFistTwo = language.substr(0,2); // To only keep the first 2 characters.
console.log(languageFistTwo);
switch (languageFistTwo) {
case "sl":
document.getElementById("sl").style.display="inline-block";
break;
case "en":
document.getElementById("en").style.display="inline-block";
break;
case "de":
document.getElementById("de").style.display="inline-block";
break;
case "it":
document.getElementById("it").style.display="inline-block";
break;
case "hr":
document.getElementById("hr").style.display="inline-block";
break;
case "ru":
document.getElementById("ru").style.display="inline-block";
break;
default:
document.getElementById("en").style.display="inline-block";
break;
}
解决方案
这是我假设您正在尝试做的一个经过编辑的示例。如果要使用示例运行,则必须class
在按钮上使用而不是在所有图像上id
使用click
侦听器,而不仅仅是第一组图像。
无论哪种方式,您都可以在一个功能中解决所有问题。您不需要每种语言的函数。
注释和解释在代码中。
//function toRu(){
function toAny(){
var lngs = document.querySelectorAll(".lng");
for (var i=0;i<lngs.length;i++){
//REM: The element with the matching id is inline-block, the others none
lngs[i].style.display = lngs[i].getAttribute('data-id') == this.value ? 'inline-block' : 'none'
}
}
//REM: This only assings the event to one button
/*
document.getElementById("slo").addEventListener("click", toAny);
document.getElementById("ang").addEventListener("click", toAny);
document.getElementById("nem").addEventListener("click", toAny);
document.getElementById("ita").addEventListener("click", toAny);
document.getElementById("hrv").addEventListener("click", toAny);
document.getElementById("rus").addEventListener("click", toAny);
*/
for(var tL=document.querySelectorAll('input.zastave'), i=0, j=tL.length; i<j; i++){
tL[i].addEventListener("click", toAny);
}
<!--
I do not know why you replicated the language selectors multiple times. For me this structure makes more sense.
-->
<nav>
<input type="button" id="slo" class="zastave" value="Slo">
<input type="button" id="ang" class="zastave" value="Eng">
<input type="button" id="nem" class="zastave" value="Deu">
<input type="button" id="ita" class="zastave" value="Ita">
<input type="button" id="hrv" class="zastave" value="Hrv">
<input type="button" id="rus" class="zastave" value="Rus">
</nav>
<!--
id should be unique. Therefore I changed it to data-id and made it match the values of the buttons. This allows us to easily toggle the right divs in one function
-->
<div class="lng" data-id="Slo">
Content of the page in Sl language
</div>
<div class="lng" data-id="Eng">
Content of the page in En language
</div>
<div class="lng" data-id="Deu">
Content of the page in Ger language
</div>
推荐阅读
- python - 模拟 requests.post
- node.js - 在 MongoDB 中查询嵌套在数组中的对象
- java - 我正在尝试使用休息控制器从 h2 数据库中检索记录,但它说没有数据集
- python - 如何实时更新图像文件 Pygame?
- c# - http请求不使用json格式
- python - 向具有 CSRF 保护的 Ruby on Rails 应用程序发出 POST 请求时出现 404 错误
- dataframe - 如何使用 PySpark 在数据框中过滤字符串类型的嵌套列
- python - 无法使用 beautifulsoup 抓取 div 文本
- java - 按下回车键后如何限制扫描仪对象接受任何内容
- javascript - 如何计算两个日期选择器之间的总天数并将结果显示在另一个文本字段中?