jQuery翻译+切换，如何链接这两个？ [英] jQuery translate + toggle, how to link the two?
问题描述
我目前正在研究一个将网站文本翻译成外语的jQuery脚本。我正在使用Google Translate API。我希望该页面包含一个名为En Espanol的链接，当用户点击En Espanol时，页面正文将被翻译成西班牙语，但该链接除外，用英语表示 - 当用户点击该链接时，页面正文将恢复为英文。下面的代码是我到目前为止的代码。任何帮助将不胜感激。谢谢。
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>
推荐答案
这应该可以让你入门。但是，这里有一些问题，你需要解决。例如，这不一定要翻译所有页面上的文本，只需< p> 元素<$ c $里面的元素c>< div id =article> 。您可以使用自己的高级选择器替换选择器，该选择器涵盖了您需要覆盖的所有内容。
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:
- 您在链接中不需要
onclick事件 - 我们可以做我们需要的事情轻松进入jQuery中的切换函数。 -
< div id =translation>部分是不必要的（我假设您只是从API复制并粘贴）。 - 确保您通过其ID访问链接，除非您需要多个链接翻译整个页面（似乎不是这样）。
- You don't need an
onclickevent in the link–we can do what we need to easily inside thetogglefunction 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>
有关详细信息，请参阅 Google AJAX语言API 。
For more information, see the Google AJAX Language API.
这篇关于jQuery翻译+切换，如何链接这两个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
