gpt4 book ai didi

javascript - 为不同语言编辑字体的方法——HTML、CSS、JQUERY

转载 作者:太空宇宙 更新时间:2023-11-04 05:46:29 25 4
gpt4 key购买 nike

我有一个用于类(class)元素的简单网站。我使用 jquery 有两种语言——英语和韩语。这是我的导航栏上的代码:

HTML

<nav>
<ul>
<li><a href="index.html" class="lang" key="home">Home</a></li>
<li><a href="characters.html" class="lang" key="characters">Characters</a></li>
<li><a href="challenge.html" class="lang" key="challenge">Challenge</a></li>
<li><a href="gallery.html" class="lang" key="gallery">Gallery</a></li>
<li><a href="portfolio.html" class="lang" key="portfolio">Portfolio</a></li>

<button class="translate" id="eng">English</button>
<button class="translate" id="kor">Korean</button>
</ul>
</nav>

JQUERY

var arrLang = {
'eng' : {
'title' : 'Doraemon',
'home' : 'Home',
'characters' : 'Characters',
'challenge' : 'Challenge',
'gallery' : 'Gallery',
'portfolio' : 'Portfolio'
},

'kor' : {
'title' : '도라에몽',
'home' : '홈페이지',
'characters' : '케릭터',
'challenge' : '도전',
'gallery' : '사진',
'portfolio' : '포트폴리오'
}

};

$(function(){
$('.translate').click(function(){
var lang = $(this).attr('id');

$('.lang').each(function(index, element){
$(this).text(arrLang[lang][$(this).attr('key')]);

});
});
});

但是,如果可能的话,我正在寻找一种方法,以便我可以根据语言编辑文本。例如,当它是英文时,我希望它的大小为 20px 的字体系列 Verdana,而当它是韩语时,我希望它的大小为 15px 的 font-family monospace。

是否有任何简单的方法可以将其合并到我的代码中,或者我必须使用其他方法吗?

我在 javascript/jquery 方面没有任何经验,并且一直在寻找如何使用 CSS 以及可能的每个文本位的类或 id 来设置样式。

谢谢。

最佳答案

绝对是使用类的正确思路。我刚刚在您的代码中添加了两行以使其正常工作。

如果你想翻译整个页面,而不仅仅是导航,我建议在 <body> 中添加一个类元素代替。

var arrLang = {
'eng' : {
'title' : 'Doraemon',
'home' : 'Home',
'characters' : 'Characters',
'challenge' : 'Challenge',
'gallery' : 'Gallery',
'portfolio' : 'Portfolio'
},

'kor' : {
'title' : '도라에몽',
'home' : '홈페이지',
'characters' : '케릭터',
'challenge' : '도전',
'gallery' : '사진',
'portfolio' : '포트폴리오'
}

};

$(function(){
$('.translate').click(function(){
var lang = $(this).attr('id');

$('.lang').each(function(index, element){
$(this).text(arrLang[lang][$(this).attr('key')]);

});

$('nav').removeClass(); // remove all classes
$('nav').addClass(lang);
});
});
nav {
font-family: Verdana;
font-size: 20px;
}

nav.kor {
font-family: monospace;
font-size: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href="index.html" class="lang" key="home">Home</a></li>
<li><a href="characters.html" class="lang" key="characters">Characters</a></li>
<li><a href="challenge.html" class="lang" key="challenge">Challenge</a></li>
<li><a href="gallery.html" class="lang" key="gallery">Gallery</a></li>
<li><a href="portfolio.html" class="lang" key="portfolio">Portfolio</a></li>

<button class="translate" id="eng">English</button>
<button class="translate" id="kor">Korean</button>
</ul>
</nav>

关于javascript - 为不同语言编辑字体的方法——HTML、CSS、JQUERY,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58674543/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com