Question

我目前正在研究一个将网站文本翻译成外语的jQuery脚本。我正在使用Google Translate API。我希望该页面包含一个名为En Espanol的链接，当用户点击En Espanol时，页面正文将被翻译成西班牙语，但该链接除外，用英语表示 - 当用户点击该链接时，页面正文将恢复为英文。下面的代码是我到目前为止的代码。任何帮助将不胜感激。谢谢。

JQuery的：

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

Answer 1

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

我从原始代码改变了几件事：

您在链接中不需要onclick事件 - 我们可以在jQuery中的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 Language API。

jQuery翻译+切换，如何链接这两个？

1 个答案: