jQuery translate + toggle, how to link the two?

问题

I'm currently working on a jQuery script that will translate the site's text into a foreign language . I'm utilizing Google Translate API for this. I would like the page to include a link that says En Espanol and when the user clicks on En Espanol, the body of the page gets translated into Spanish with the exception of that link which says In English - when the user clicks on that link, the body of the page will revert back to English. The following code below is what I have so far. Any help will be greatly appreciated. Thank you.

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>

回答1:

This should get you started. There are some problems here, however, that you'll neeed to address. For example, this isn't necessarily going to translate all the text on the page, just the <p> elements inside <div id="article">. You can replace the selector with your own advanced selector that covers everything you need it to cover.

A couple of things I've changed from your original code:

You don't need an onclick event in the link–we can do what we need to easily inside the toggle function in jQuery.
The <div id="translation"> section is unnecessary (I assume you just copy and pasted from the API).
Make sure you access the link by its id, unless you need multiple links that translate the entire page (which doesn't seem to be the case).

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

For more information, see the Google AJAX Language API.

来源：https://stackoverflow.com/questions/1308818/jquery-translate-toggle-how-to-link-the-two

标签

jquery

toggle

google-translate