为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

摇曳的蔷薇 2021-12-23 14:40:22
我正在使用 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>但我不知道如何从标志中更改所选语言。有什么帮助吗?
查看完整描述

2 回答

?
一只甜甜圈

TA贡献1836条经验 获得超5个赞

您可以在 Google 翻译器功能中添加包括的语言:“en,es”以仅启用特定语言。


示例:


function googleTranslateElementInit() {

  new google.translate.TranslateElement({ pageLanguage: 'en',includedLanguages: "en,es" }, 'google_translate_element');

}

包含的语言 - 更新所需的语言。


查看完整回答
反对 回复 2021-12-23
?
冉冉说

TA贡献1877条经验 获得超1个赞

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.getAttribute('data-lang'); 

    var languageSelect = document.querySelector("select.goog-te-combo");

    languageSelect.value = lang; 

    languageSelect.dispatchEvent(new Event("change"));

  }); 

});


查看完整回答
反对 回复 2021-12-23
  • 2 回答
  • 0 关注
  • 147 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号