Question

我有以下场景：

<div class="maindiv">
     <div class="msg">some text</div>
                  ...
     <div class="msg">some other text</div>
</div>

我想查看每个'msg'类div的文本并使用Google API进行翻译。

我做了以下JS功能：

function translateTimeline(){

var lang = $('#timelineLenguage').val();
var translation;
    $(".msg").each(
    function(i){
                 translation=google.language.translate($(this).text(), "", lang,
                 function(result) {
                    if (!result.error) {

                       $(this).text(result.translation);
                    }else{
                       alert('Cannot translate tweet. Try again later');
                    }
                 });

    });
return false;
};

无法正常工作..

这是我用有限的JS / jQuery技能所能做到的。

提前获取您的帮助和时间：）

Answer 1

我从未玩过google.language APIs，这是一个有趣的练习。基本上它是将.msg项翻译成另一种语言的工具。我不确定如果API发生变化会有多么脆弱，但它看起来非常好用。请注意，这不会保留原始文本，因此如果您执行多个翻译，则翻译质量会“降低”。看看我如何执行translateWithGoogle()功能，我认为这将通知您自己的代码。我尽可能地简化了它。

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1.3.2");
google.load("language", "1");

function translateWithGoogle(context, fromLang, toLang) {
    google.language.translate($(context).text(), fromLang, toLang,
      function(result) {
        if (!result.error) {
            $(context).text(result.translation);
        }
    });
}
function translateTimeline() {
    var fromLang = $('#currentLang').text();
    var toLang = $('#targetLang').val()
    $('.msg').each(function() {
        translateWithGoogle(this, fromLang, toLang);
    });
    $('#currentLang').text(toLang);
}

$(document).ready(function(){
    $('#targetLang').bind('change', function(){
        translateTimeline();
    });
});
</script>
</head>
<body>
<div class="maindiv">
    <div class="msg">some text</div>
    <div class="msg">some other text</div>
    <div class="msg">hello world</div>
    <div class="msg">my stack has overflowed!</div>
</div>
<hr />
<span id="currentLang">en</span>
<select id="targetLang">
    <option value="af">Afrikaans</option>
    <option value="sq">Albanian</option>
    <option value="ar">Arabic</option>
    <option value="be">Belarusian</option>
    <option value="bg">Bulgarian</option>
    <option value="ca">Catalan</option>
    <option value="zh-CN">Chinese</option>
    <option value="hr">Croatian</option>
    <option value="cs">Czech</option>
    <option value="da">Danish</option>
    <option value="nl">Dutch</option>
    <option value="en">English</option>
    <option value="et">Estonian</option>
    <option value="tl">Filipino</option>
    <option value="fi">Finnish</option>
    <option value="fr">French</option>
    <option value="gl">Galician</option>
    <option value="de">German</option>
    <option value="el">Greek</option>
    <option value="iw">Hebrew</option>
    <option value="hi">Hindi</option>
    <option value="hu">Hungarian</option>
    <option value="is">Icelandic</option>
    <option value="id">Indonesian</option>
    <option value="ga">Irish</option>
    <option value="it">Italian</option>
    <option value="ja">Japanese</option>
    <option value="ko">Korean</option>
    <option value="lv">Latvian</option>
    <option value="lt">Lithuanian</option>
    <option value="mk">Macedonian</option>
    <option value="ms">Malay</option>
    <option value="mt">Maltese</option>
    <option value="no">Norwegian</option>
    <option value="fa">Persian</option>
    <option value="pl">Polish</option>
    <option value="pt">Portuguese</option>
    <option value="ro">Romanian</option>
    <option value="ru">Russian</option>
    <option value="sr">Serbian</option>
    <option value="sk">Slovak</option>
    <option value="sl">Slovenian</option>
    <option value="es">Spanish</option>
    <option value="sw">Swahili</option>
    <option value="sv">Swedish</option>
    <option value="th">Thai</option>
    <option value="tr">Turkish</option>
    <option value="uk">Ukrainian</option>
    <option value="vi">Vietnamese</option>
    <option value="cy">Welsh</option>
    <option value="yi">Yiddish</option>
</select>

</body>
</html>

Answer 2

myabe尝试

$(this).html()

而不是

$(this).text()

Answer 3

这可能是因为您在该行中拼写错误的语言：

lang = $('#timelineLenguage').val();

如果不是这样，您需要提供有关正在发生的事情的更多详细信息。

Answer 4

您确定以下行中的“this”指向正确的对象吗？它不指向窗口吗？

$(this).text(result.translation);

试试这个：

function translateTimeline(){

    var lang = $('#timelineLenguage').val();
    var translation;
    $(".msg").each(
    function(i){
        var me = this; /*CHANGED*/
        translation=google.language.translate($(this).text(), "", lang,
            function(result) {
                if (!result.error) {
                    $(me).text(result.translation); /*CHANGED*/
                }else{
                    alert('Cannot translate tweet. Try again later');
                }
            }
        );
    });
    return false;
};

如何迭代div？

4 个答案: