jquery - 撤消使用 Jquery Translate 进行的翻译（Google Translate API v2）

Question

我一直在使用这个 jQuery 插件来帮助我与 Google Translate API v2 进行交互，到目前为止它运行得非常好。

但是，我想为用户提供撤消翻译的选项，但我看不到任何明显的方法可以将语言返回到其源代码（而且我不想将字符串“重新翻译”回原始语言）。

Answer 1

在翻译之前存储翻译的内容可能是最好的解决方案。由于您仍然使用 jquery，请查看 .html() --> http://api.jquery.com/html/

翻译示例：

var content = $('.element').html();
$('.element').translate();

我想这是可能的，但是您需要对此进行测试：

var content = $('.element').html();
var translated_content = $(content).translate();
$('.element').html(translated_content);

现在回到原来的：

$('.element').html(content);

因此，围绕此包装一些函数和一些事件侦听器并完成工作！

---

编辑：替代方法

在重新考虑了我上面的原始方法之后，认为隐藏原件并添加翻译副本更容易。

注意：使用 .clone() 具有产生具有重复 id 属性的元素的副作用，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。

职能：

function translate(object){
   var clone = $(object).clone().addClass("trans_translation"); //copies the object
   $(object).addClass("trans_original"); //adds a identifier to the original
   $(object).after(clone); //inserts the clone to the html
   $(object).next(".trans_translation").translate(); //translate the new div
   $(object).hide(); //hides to original
   $(object).next(".trans_translation").show(); //shows the translation
}

function toggle_translation(bool){
  bool = bool || false; //default parameter
  if(bool){ //if true, show translation, hide original
    $(".trans_translation").show();
    $(".trans_original").hide();
  } else { //if false (default), hide translation, show original
    $(".trans_translation").hide();
    $(".trans_original").show();
  }
}

文件准备好：

$(document).ready(function(){
  $(".trans_translation").css( "display", "none" ); //hides the translations on default

  //example button to translate a div
  $(".translateme").click(function() {
    var object = $(this).parent(); //selects the parent of the button
    translate(object);
  });

  //example button to hide translated and show original on page
  $(".givemetheoriginal").click(function() {
    toggle_translation();
  });

});

HTML 正文：

<div class=".content">
  <p>This is just a text</p>
  <div class=".translateme">translate this div</div>
</div>
<div class=".content">
  <p>This is just a text</p>
  <div class=".translateme">translate this div</div>
</div>
<div class=".content">
  <p>This is just a text</p>
  <div class=".translateme">translate this div</div>
</div>
<div class=".givemetheoriginal">Show the original!</div>

尚未对此进行测试，但假设应该可以。

注意：糟糕，您应该首先重命名翻译函数，因为翻译插件具有相同的名称。