jQuery tradurre + ginocchiera, come collegare le due cose?

StackOverflow https://stackoverflow.com/questions/1308818

  •  19-09-2019
  •  | 
  •  

Domanda

Al momento sto lavorando su uno script jQuery che tradurre il testo del sito in una lingua straniera. Sto utilizzando Google Translate API per questo. Vorrei che la pagina per includere un link che dice En Espanol e quando l'utente clicca su En Espanol, il corpo della pagina viene tradotta in spagnolo, con l'eccezione di quel collegamento che dice in inglese - quando l'utente clicca su questo link, il corpo della pagina tornerà a Inglese. Il seguente codice qui sotto è quello che ho finora. Qualsiasi aiuto sarà molto apprezzato. Grazie.

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>
È stato utile?

Soluzione

Questo dovrebbe iniziare. Ci sono alcuni problemi qui, tuttavia, che si neeed di affrontare. Ad esempio, questo non è necessariamente andando a tradurre tutti il testo nella pagina, solo gli elementi <p> all'interno <div id="article">. È possibile sostituire il selettore con il proprio selettore avanzato che copre tutto il necessario per coprire.

Un paio di cose che ho cambiato dal codice originale:

  • Non è necessario un evento onclick nel link-possiamo fare quello che dobbiamo facilmente all'interno della funzione toggle in jQuery.
  • La sezione <div id="translation"> non è necessaria (presumo che appena copiato e incollato dalla API).
  • Assicurati di accedere al collegamento dal suo ID, a meno che non hai bisogno di più collegamenti che traducono l'intera pagina (che non sembra essere il caso). 
<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>

Per ulteriori informazioni, vedere la Google AJAX Language API .

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top