我使用的是php和javascript。我想在我的网站上添加带有国家标志的自定义语言选择器。我从w3schools教程中编写了以下代码；
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
在所有语言中，我只对三种语言感兴趣(塔吉克语、俄语、英语(。我把这种语言的旗帜是这样的；
<div class="flag">
<a href="#" class="eng" data-lang="eng"><img class="img-fluid" src="./img/flag-eng.png" alt=""></a>
<a href="#" class="taj" data-lang="es"><img class="img-fluid" src="./img/flag-taj.png" alt=""></a>
<a href="#" class="rus" data-lang="rs"><img class="img-fluid" src="./img/flag-rus.png" alt=""></a>
</div>
但我不知道如何从flag中更改所选的语言。有什么帮助吗？
您可以在Google翻译器功能中添加includedLanguages:"en，es">以仅启用特定语言。
示例：
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en',includedLanguages: "en,es" }, 'google_translate_element');
}
includedLanguages-使用所需语言进行更新。
HTML
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
<div class="flag">
<a href="#" class="flag_link eng" data-lang="en">Eng<img class="img-fluid" src="./img/flag-eng.png" alt=""></a>
<a href="#" class="flag_link taj" data-lang="es">ES<img class="img-fluid" src="./img/flag-taj.png" alt=""></a>
<a href="#" class="flag_link rus" data-lang="ru">RS<img class="img-fluid" src="./img/flag-rus.png" alt=""></a>
</div>
CSS
#google_translate_element{
display: none;
}
Javascript
var flags = document.getElementsByClassName('flag_link');
Array.prototype.forEach.call(flags, function(e){
e.addEventListener('click', function(){
var lang = e.getAttribute('data-lang');
var languageSelect = document.querySelector("select.goog-te-combo");
languageSelect.value = lang;
languageSelect.dispatchEvent(new Event("change"));
});
});