javascript - 单击时显示任何单词的翻译

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>

有更好的方法吗？

另外，能否采用您的解决方案来显示相同​​单词拼写的不同翻译，例如:

I left the building and turned left at the end of the street

在这里，最好能够唯一地标识两个不同的左侧，以便根据单击的左侧提供正确的翻译。

另外:

Winning the tournament was a piece of cake.

这里最好将“piece of cake”作为一个单独的项目来翻译，因为它是一个习语。

目前我只使用 javascript 和 html5，但我预计我将使用 jquery-mobile。我也愿意接受 React/Redux 解决方案。

Answer 1

第一个问题很容易通过这样的方式完成:

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>