Question

我有一个html页面，上面有很多段落。我想在用户单击时通过弹出窗口显示任何单词到另一种语言的翻译。可以这样做，但看起来很生气：

<p><span onclick="translate(this)">Once</span> <span onclick="translate(this)">upon</span> <span onclick="translate(this)">a</span> <span onclick="translate(this)">time</span>

有更好的方法吗？

此外，您的解决方案是否可以采用以显示相同单词拼写的不同翻译，例如：

我离开了建筑物，在街道尽头向左转

在这里最好唯一地识别两个不同的左键，以便根据单击的哪个键来提供正确的翻译。

也：

赢得比赛简直是小菜一碟。

在这里，最好将“小菜一碟”作为一个单项翻译，因为这是一个成语。

目前，我仅使用javascript和html5，但我希望我将使用jquery-mobile。我也愿意对React / Redux解决方案进行响应。

Answer 1

我不确定您的堆栈，因此我将通过JQuery提供解决方案。

jquery-i18n库似乎可以解决问题，尽管有些过时，并且要求开发人员自行填充翻译。

在他们的GitHub repo上，描述了用法：

在进行任何翻译之前，您必须使用“字典”（基本上是将键映射到其翻译的属性列表）初始化插件。

带有示例代码：

const my_dictionary = { 
    "some text"  : "a translation",
    "some more text"  : "another translation"
}
$.i18n.load(my_dictionary);


$('div#example').text($.i18n._('some text'));

如果您使用的是React，一种更有利的解决方案是创建某种组件来存储文本状态，并可以相应地对onClick事件进行操作。实际上，this react-translate-component简直就是鸭蛋！

编辑：我会发表评论，对有问题的堆栈进行探测，以便进一步调整我的回答，但我却没有50个声誉。

Answer 2

第一个问题很容易以这种方式完成：

document.getElementById('target')
  .addEventListener('click', getClickedWord);
  
function getClickedWord(e){
  translate(e.target.innerHTML);
}

function translate(word){
  console.log(word);
  // do rest
}

<p id="target">
  <span>Hello</span>
  <span>Stack</span>
  <span>OverFlow</span>
</p>

在点击时显示任何单词的翻译

2 个答案: