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

Question

I have a html page with a number of paragraphs on it. I want to show the translation of any word to another language via a popup when the user clicks on it. It could be done like this but it seems mad:

<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>

Any better ways of doing this?

Additionally, could your solution be adopted to show different translations for the same word spelling, for example:

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

Here it would be nice to uniquely identify the two different lefts so that the correct translation could be offered depending on which one is clicked.

Also:

Winning the tournament was a piece of cake.

Here it would be nice to handle "piece of cake" as a single item to translate since it is an idiom.

At the moment I'm just using javascript and html5 but I expect that I will be using jquery-mobile. I am also open to react/redux solutions.

Answer 1

I am unsure of your stack, so I'll provide a solution with JQuery.

The library jquery-i18n seems to do the trick just fine, albeit a tad outdated and requiring the developer to populate translations on their own.

Over on their GitHub repo , the usage is described:

Before you can do any translation you have to initialise the plugin with a 'dictionary' (basically a property list mapping keys to their translations).

with the example code:

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

If you were using React, a much more favorable solution is to create some sort of component which stores the state of the text, and can act upon an onClick event accordingly. In fact, this react-translate-component was just a duck-duck-go away!

Edit: I would have commented, probing for the stack in question in order to further tailor my response, yet I lack 50 reputation.

Answer 2

The first question is easy to do in a way like this:

 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>