javascript - 多语言网站- 需要在每个页面上进行语言设置,如何避免这种情况?
问题描述
我正在设计一个界面或一个控制器,我需要使其可以访问各种语言。该接口在其自身的设备上本地安全。
我设法翻译了前几页,让它按我想要的方式工作。除了一个问题:
因此,如果您在第一页并将语言设置为英语,它会将第一页更改为英语。如果您要转到具有英文翻译的下一页,它将返回默认语言,您需要再次单击英语。
有没有办法在我使用的功能中解决这个问题?
这是一个小提琴,所以你可以看看我的代码:
https://jsfiddle.net/v29Lfar6/
如果我需要提供任何其他内容或更深入地澄清问题,请告诉我。提前谢谢![JsFiddle
.container_buttonp1{
text-align: center;
margin-left: -20px;
margin-right: -20px;
}
.button{
display:inline-block;
background-color: #f4f4f4;
color: #105ea6;
border-radius: 8px;
padding: 5px 2,5px;
width: 100px;
text-align: center;
font-size: 12px;
border: 2px grey solid;
text-decoration: none;
margin: 0 20px;
}
.button:hover{
border: 2px grey solid;
padding: 5px 2,5px;
width: 100px;
background-color: #105ea6;
color: #f4f4f4;
border-radius: 8px;
}
footer {
position: absolute;
height: 10%;
width: 100%;
background-color: #f4f4f4;
}
p.copyright{
position: absolute;
width: 100%;
color: #105ea6;
line-height: 30px;
font-size: 1.0em;
text-align: center;
bottom:0;
}
.form{
text-align: center;
}
.nav{
height: 40px;
background-color: #105ea6;
height: 100px;
width: 100px;
}
nav ul{
color: #105ea6;
list-style: none;
text-align: center;
font-size: 25px;
}
nav ul li a{
color: #105ea6;
display:inline-block;
text-decoration: none;
text-align: center;
border: 2px grey solid;
width: 250px;
padding: 20px;
border-radius: 8px;
cursor: pointer;
}
nav ul li a:hover{
border: 2px grey solid;
padding: 20px;
width: 250px;
background-color: #105ea6;
color: #f4f4f4;
border-radius: 8px;
}
.header_navbar{
font-size: x-large;
text-align: center;
padding-left: 40px;
}
<!DOCTYPE html>
<html lang="de">
<div id="content">
<img src="IMAGES_AYNU/elsner_logo1.svg" width="150" height="150"/>
</div>
<br>
<br>
<br>
<br>
<body>
<head>
<script src="https://kit.fontawesome.com/9cef10a72a.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hauptmenü</title>
<link rel="stylesheet" type="text/css" href="CSS_AYNU/AYNU.Style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arrLang = {
'en': {
'wateringzones': 'Wateringzones',
'sensors': 'Sensors',
'back': 'Back',
'mainmenue': 'Main menu',
'help': 'Help'
},
'de': {
'wateringzones': 'Bewässerungszonen',
'sensors': 'Sensoren',
'back': 'Zurück',
'mainmenue':'Hauptmenü',
'help': 'Hilfe'
}
};
// Process translation
$(function() {
$('.translate').click(function() {
var lang = $(this).attr('id');
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
});
});
</script>
</head>
<div class="header_navbar">
<header>
<button id="en" class="translate">English</button>
<button id="de" class="translate">Deutsch</button>
<br>
<h1><span class="lang" key="mainmenue">Hauptmenü</span> <i class="fas fa-bars"></i></h1>
</header>
</div>
<br>
<div class="navebar">
<nav>
<ul>
<li class="navbar"><a class="lang" href="AYNU_WATERINGZONES.html" key="wateringzones">Bewässerungszonen</a></li>
<br>
<li class="navbar"><a class="lang" href="AYNU_SENSORS.html" key="sensors">Sensoren</a></li>
<br>
<li class="navbar"><a class="lang" href="AYNU.Structure.html" key="back">Zurück</a></li>
</ul>
</nav>
</div>
<br>
<br>
</body>
</html>
解决方案
推荐阅读
- procedural - 使用 ML 对一堆游戏关卡进行分类
- python - 从 20 多名玩家中找到最均匀的 5V5 比赛
- solidity - 在我用于测试的 js 文件中。我将发送交易调用到智能合约,那么 value 和 gas 之间有什么区别:
- regex - Scala Regex:匹配非单个字符输入
- asp.net-core - 如何使用 ASP.NET Core 计算用户之间的距离
- file - 使用 SSIS 导入 Fixedwidth 文件
- amazon-web-services - kops 'protectKernelDefaults' 标志和 'EventRateLimit' 准入插件不起作用
- asp.net-web-api - 尝试激活“AspNetCoreRateLimit.IpRateLimitMiddleware”时无法解析“AspNetCoreRateLimit.IProcessingStrategy”类型的服务
- sql - 如何从字符串 SQL 中提取数字
- acumatica - Acumatica:如何使用 REST API 覆盖销售订单中的 Bill-To Address 和 Ship-To Address