我当前正在使用Dreamweaver,并且正在尝试构建一个简单的翻译器功能。我有一个下拉菜单,其中包含多个选项(每种语言均由专用ID指定),我希望用户选择所选择的语言并转换所选的HTML字符串。到目前为止,我已经尝试了所有方法,但似乎无法使它正常工作,我认为这是最简单的方法。任何想法或编辑都会有很大帮助。 ps。我是一个初学者
jQuery的:
$("#French").click(function(){
$("#AppartmentB").replaceWith("maison");
});
HTML:
<select name="selectmenu" id="selectmenu">
<option value="option1" id="English">English</option>
<option value="option2" id="French">French</option>
</select>
<div data-role="page" id="AppartmentPage" class="page">
<h1 class="TopText" align="center" id="AppartmentT">Appartment</h1>
<h1 class="BotText" align="center" id="AppartmentB">Appartment</h1>
</div>
最佳答案
我整理了一个基本的例子。本质上,JS具有翻译数据库。我只用1个键text
放入了一个项目。 JS监听对语言选择下拉菜单的任何更改。
这实际上是多少个本地化库工作的。如果要实现更强大的功能,请查看jquery-localize。
// Translation database
var translations = {
'en': {
'text': 'Apartment'
},
'fr': {
'text': 'Maison'
}
}
// Li
$("#languageSelect").change(function() {
var str = '';
$("#languageSelect option:selected").each(function() {
var langCode = $(this).val();
str += translations[langCode]['text'];
});
$("#translatedText").text(str);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="languageSelect">
<option value="en" selected="selected">English</option>
<option value="fr">French</option>
</select>
<div data-role="page" id="AppartmentPage" class="page">
<h1 id="translatedText">Apartment</h1>
</div>