如何用jQuery为指定Div添加谷歌翻译？现有代码报错求助

你遇到的这个错误根源很明确——你用的google.language.translate是谷歌已经彻底废弃的旧版Translate API，现在这个google.language对象根本不存在，自然调用不了它的translate方法。老API早就停止服务了，得换成官方现在推荐的方案才行。

下面给你两种可行的解决办法，根据你的需求选就行：

方案一：快速集成（无API密钥，适合简单场景） #

用Google Translate Element API，能快速实现自定义按钮触发翻译的效果，不需要申请密钥。代码如下：

<p id="some">Hello</p>
<input id="trans" value="Translate to French" type="button">

<!-- 初始化谷歌翻译元素（隐藏起来不占布局） -->
<div id="google_translate_element" style="display:none;"></div>

<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'fr', // 只保留法语选项，避免多余语言
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- 自定义按钮触发逻辑 -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
  $('#trans').click(function() {
    // 模拟选择法语并触发翻译
    $('.goog-te-combo').val('fr').trigger('change');
  });
</script>

注意事项： #

这个方案依赖谷歌翻译组件的DOM结构，未来如果谷歌更新组件样式，可能需要调整代码，但胜在快速、零配置，适合个人小站点使用。

方案二：稳定生产级方案（需要API密钥） #

如果你的网站需要长期稳定的翻译功能，推荐用Google Cloud Translation API（有免费额度，超出后按量付费）。步骤如下：

1. 先去谷歌云平台创建项目，启用Cloud Translation API，生成你的API密钥
2. 替换下面代码中的YOUR_API_KEY为你的密钥即可：

<p id="some">Hello</p>
<input id="trans" value="Translate to French" type="button">

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
  $('#trans').click(function() {
    const apiKey = 'YOUR_API_KEY'; // 替换成你的谷歌云API密钥
    const targetText = $('#some').text();
    
    $.ajax({
      url: `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`,
      method: 'POST',
      data: {
        q: targetText,
        source: 'en',
        target: 'fr'
      },
      success: function(res) {
        const translated = res.data.translations[0].translatedText;
        $('#some').text(translated);
      },
      error: function(err) {
        console.log('翻译请求失败：', err);
      }
    });
  });
</script>

优势： #

完全自定义翻译逻辑，不受谷歌前端组件更新影响，适合需要精确控制翻译流程的生产环境，免费额度足够小流量网站使用。

内容的提问来源于stack exchange，提问作者developer