2

我目前正在开发一个 jQuery 脚本，它将网站的文本翻译成外语。我正在为此使用 Google Translate API。我希望该页面包含一个显示 En Espanol 的链接，当用户单击 En Espanol 时，页面的主体会被翻译成西班牙语，但该链接显示为 In English - 当用户单击该链接时，页面正文将恢复为英文。下面的代码是我到目前为止所拥有的。任何帮助将不胜感激。谢谢你。

查询：

$(document).ready(function(){
      // hide all blocks that have class hide
        //$('.hide').hide();
        // toggle link1 with container1
        // using chaining for performance and ease
        // changing html of link
        $('.showhide').toggle(function(){
          //$(this).parent().next().slideDown('slow').removeClass('hide').preventDefault;
            $(this).html('English');
          },function(){
            //$(this).parent().next().slideUp('slow').addClass('hide').preventDefault;
            $(this).html('En Espanol');
        })

     });

HTML：

<p><a id="link1" class="showhide" href="#container1" onclick="translate('es');">
En Espanol</a></p>
<!--Calls Google Translate via div -->
<div id="translation"></div>
<div id="article">
<p>Google Inc is set to introduce on Tuesday a new Web browser designed to handle text
and graphics.</p>
</div>
4

1 回答 1

3

这应该让你开始。但是，这里有一些问题需要您解决。例如，这不一定会翻译页面上的所有文本，只<p>翻译<div id="article">. 您可以将选择器替换为您自己的高级选择器，该选择器涵盖了您需要它涵盖的所有内容。

我从您的原始代码中更改了几件事：

  • 您不需要在链接中添加事件——我们可以在 jQueryonclick的函数内部轻松地做我们需要做的事情。toggle
  • 该<div id="translation">部分是不必要的（我假设您只是从 API 复制和粘贴）。
  • 确保您通过其 id 访问链接，除非您需要多个链接来翻译整个页面（似乎并非如此）。
<html>
<head>
<title>Google Translate Example</title>
    <script type="text/javascript" src="includes/js/jquery.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("language", "1");

    $(document).ready(function(){
        $('#link1').toggle(function(){
            $('#article p').each(function(){
                var element = $(this);
                google.language.translate($(this).text(), 'en', 'es', function(result){
                    $(element).text(result.translation);
                });
            });
            $(this).html('English');
        }, function(){
            $('#article p').each(function(){
                var element = $(this);
                google.language.translate($(this).text(), 'es', 'en', function(result){
                    $(element).text(result.translation);
                });
            });
            $(this).html('En Espanol');
        });
    });
    </script>
</head>
<body>
    <p><a id="link1" href="#container1">En Espanol</a></p>
    <div id="article">
        <p>Google Inc is set to introduce on Tuesday a new Web browser designed to handle text
    and graphics.</p>
    </div>
</body>
</html>

有关详细信息，请参阅Google AJAX 语言 API。

于 2009-08-20T22:25:50.840 回答