jQuery translate + toggle, 둘을 연결하는 방법?

현재 사이트의 텍스트를 외국어로 번역하는 jQuery 스크립트를 작성 중입니다. 이를 위해 Google Translate API를 사용하고 있습니다. 페이지에 En Espanol이라는 링크가 포함되어 있고 En Espanol을 클릭하면 페이지의 본문이 영어로 표시되는 링크를 제외하고 스페인어로 번역됩니다. 사용자가 해당 링크를 클릭하면, 페이지 본문이 영어로 되돌아갑니다. 아래의 코드는 내가 지금까지 가지고있는 것이다. 어떤 도움이라도 대단히 감사하겠습니다. 고맙습니다.jQuery translate + toggle, 둘을 연결하는 방법?

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>

출처

2009-08-20 user160347

무엇이 질문입니까? 언제 또는 어떻게 토글 할 것인가? Google의 API를 호출합니까? –

죄송합니다. 두 가지 질문이 있습니다. 링크를 토글하고 링크를 통해 Google API를 호출하여 텍스트를 번역하게하는 방법. – user160347

이것은 당신이 시작할 수 있어야합니다. 그러나 여기서 해결해야 할 몇 가지 문제가 있습니다. 예를 들어, 이것은 반드시 모두<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를 참조하십시오.

출처

2009-08-20 22:25:50

Joshleitzel 대단히 감사합니다. – user160347

jQuery translate + toggle, 둘을 연결하는 방법?

답변

관련 문제