jQuery輸出問題

javascript jquery

pcschoolleo 2012-04-25 15:13:58 ‧ 4799 瀏覽

分享至

我使用phonegap製作app，打算多國語言化，翻譯使用google translate，我有找到一個google trnaslates plugin，而且也順利翻譯，不過有一個小問題，這個plugin只能翻譯一個元素，超過2個就不行，我想要一次翻譯多個，而且還要輸出到不同的欄位，不知要增加什麼？

翻譯外掛
http://www.superawesomejquery.com/plugins/2_jquery-google-translate-plugin/demos/

底下是google.js程式碼

$(document).ready(function() {
$('.simple-input').googleTranslate({
target : '.simple-output',
targetLang : 'zh-tw',
apiKey : 'AIzaSyCQNwanknkUx3c'
});
});

底下是我的App範例程式碼
<script type="text/javascript" src="google/jquery.googleTranslate-2.js"></script>
<script type="text/javascript" src="google/google.js"></script>

<body >
<p><span class="simple-input">hi</span></p>
<p><span class="simple-input">world</span></p>
<p>
<span class="simple-output"></span>
<span class="simple-output"></span></p>

現在翻譯結果會出現
你好你好
或是
世界世界
1.有辦法一次翻譯多個元素嗎？現在只會翻譯一個元素
2.輸出結果有辦法只要建立一個元素就可收納全部翻譯結果，不用要輸出2個元素，就要建立2次
<span class="simple-output"></span>嗎？
謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

fillano

iT邦超人 1 級 ‧ 2012-04-26 10:22:00

最佳解答

http://www.superawesomejquery.com/downloads/translate/jquery.googleTranslate-2.js

照我從他原始碼裡面看到的邏輯，要達成你的目的是做不到的，建議你直接改他的原始碼。原始碼不到100行，而且關鍵邏輯只有幾行，應該不難改。

問題在哪裡的話...

&lt;pre class="c" name="code">
var input = $(element).html();

這樣無法處理多個元素的innerHTML。

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

pcschoolleo iT邦新手 5 級 ‧ 2012-04-26 11:52:11 檢舉

我看了一下jquery的api，假如超過1個相同的元素，只會顯示第一個符合的，所以我的問題應該要找到，可以處理多個元素的api，對吧，努力找尋中
In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned.

fillano iT邦超人 1 級 ‧ 2012-04-26 12:17:21 檢舉

&lt;pre class="c" name="code">
$('.simple-imput').each(function(){console.log($(this).html())});

像這樣才能每個元素執行一次html()。

$()找到的結果是一個list，即使只有一個元素也一樣。

另外，如果你看過google translate api的說明，你就會知道可以傳多筆&q=a;&q=c資料給他，翻譯完回傳的也會是陣列，然後你再處理這個陣列就可以。

pcschoolleo iT邦新手 5 級 ‧ 2012-04-26 20:28:42 檢舉

我這樣改好樣不行耶！還是我會錯意了。
我是jquery的初學者，買了一本jquery書，也借了一本書，看完後只有概念而已。
$(document).ready(function() {
$('.simple-input').each(function(){console.log($(this).html())}).googleTranslate({
target : '.simple-output',
targetLang : 'zh-tw',
apiKey : 'AIzaSyCQNwanknkUx3c'
});
});

pcschoolleo iT邦新手 5 級 ‧ 2012-04-26 20:47:37 檢舉

btw,另html及each的用法，突然發現書裡面有提到，只是之前大概看過

fillano iT邦超人 1 級 ‧ 2012-04-26 20:52:05 檢舉

看起來您真的不熟jQuery...我再幫您看一下好了

登入發表回應

賽門甜不辣

iT邦研究生 2 級 ‧ 2012-04-26 09:22:24

你有發現到demo網頁上面是一個蘿蔔一個坑嗎？
那你的情形是一個蘿蔔多個坑，一個input塞到到兩個output，
看這段：

&lt;pre class="c" name="code">target : '.simple-output',

你有兩個class是simple-input，這就說明了每一個simple-input會去塞在兩個simple-output內，於是就重複了。

回應 2
分享
檢舉

pcschoolleo iT邦新手 5 級 ‧ 2012-04-26 09:45:29 檢舉

我知道原因，只是不知道如何解決

pcschoolleo iT邦新手 5 級 ‧ 2012-05-01 11:26:30 檢舉

我去官方jquery提問，有人回答，而且我測試確認可以執行，我會找時間放到github或jquery外掛分享給大家，謝謝大家。
答案為
$(function() { // Shorthand for $(document).ready(function() {
$('.simple-input').each(function(i) {
$(this).googleTranslate({target: '.simple-output:eq(' + i + ')',
targetLang : 'zh-tw',
apiKey : 'AIzaSyCQNwankbSubzm'
});
});
});