jQuery перевод + переключение, как связать два? - PullRequest
Новая
       12

jQuery перевод + переключение, как связать два?

2 голосов
/ 21 августа 2009

В настоящее время я работаю над сценарием 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>

1 Ответ

3 голосов
/ 21 августа 2009

Это должно помочь вам начать. Однако здесь есть некоторые проблемы, которые вам необходимо решить. Например, это не обязательно будет переводить все текст на странице, только элементы <p> внутри <div id="article">. Вы можете заменить селектор своим собственным расширенным селектором, который охватывает все, что вам нужно для покрытия.

Пара вещей, которые я изменил по сравнению с вашим исходным кодом:

  • Вам не нужно событие onclick в ссылке - мы можем легко сделать то, что нам нужно, внутри функции toggle в jQuery.
  • Раздел <div id="translation"> не нужен (я полагаю, вы просто скопировали и вставили из API).
  • Убедитесь, что вы получаете доступ к ссылке по ее идентификатору, если только вам не нужно несколько ссылок, которые переводят всю страницу (что, похоже, не так). 
<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 .

...