猿问

如何使用 javascript 在我的网站中添加带有自定义标志的语言翻译器？

我正在使用 php 和 javascript。我想在我的网站中添加带有国旗的自定义语言选择器。我从 w3schools 教程中编写了以下代码；


<!DOCTYPE html>

<html>


<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>

但我不知道如何从标志中更改所选语言。有什么帮助吗？


摇曳的蔷薇
浏览 148回答 2
2回答

一只甜甜圈

您可以在 Google 翻译器功能中添加包括的语言：“en,es”以仅启用特定语言。示例：function googleTranslateElementInit() {&nbsp; new google.translate.TranslateElement({ pageLanguage: 'en',includedLanguages: "en,es" }, 'google_translate_element');}包含的语言 - 更新所需的语言。
0

冉冉说

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">&nbsp; &nbsp;function googleTranslateElementInit() {&nbsp; &nbsp; &nbsp; &nbsp;new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');&nbsp; &nbsp;}</script><script type="text/javascript"&nbsp; &nbsp;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">&nbsp; &nbsp;<a href="#" class="flag_link eng" data-lang="en">Eng<img class="img-fluid" src="./img/flag-eng.png" alt=""></a>&nbsp; &nbsp;<a href="#" class="flag_link taj" data-lang="es">ES<img class="img-fluid" src="./img/flag-taj.png" alt=""></a>&nbsp; &nbsp;<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{&nbsp; display: none;}Javascriptvar flags = document.getElementsByClassName('flag_link');Array.prototype.forEach.call(flags, function(e){&nbsp; e.addEventListener('click', function(){&nbsp; &nbsp; var.getAttribute('data-lang');&nbsp;&nbsp; &nbsp; var languageSelect = document.querySelector("select.goog-te-combo");&nbsp; &nbsp; languageSelect.value = lang;&nbsp;&nbsp; &nbsp; languageSelect.dispatchEvent(new Event("change"));&nbsp; });&nbsp;});
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答