javascript - 将鼠标悬停在某些单词上时显示跨度并按需替换

Question

我正在为 TinyMCE(3.x 系列)开发拼写检查器插件。当用户单击插件进行拼写检查时，我会获取编辑器的内容并将其发送到服务器，然后从服务器将数据发回，并在错误的单词下划线和建议列表(隐藏)。它工作正常，在 TinyMCE 界面上我看到带有红色下划线的错误单词。

现在我想在用户将鼠标悬停(左键单击也可以)在错误的单词上时显示建议列表，以便他可以选择正确的单词并将其替换为错误的单词。谁能指导我应该如何进行此操作？

文本区域内容:Fourr guys went to watc movie yesterday.

HTML:<p>Fourr guys went to watc movie yesterday.</p>

点击插件后，HTML 变为:

<p>
   <span style="color: red; text-decoration: underline;">Fourr</span>
   <span class="suggestions" style="display: none;">Fore Furor Furry Fourier Four Farr Fora Fury
   Fours Fire Firer Fuhrer Fiori Fourth Dourer Fouler Foyer Fayre Fairer Fr Flour Fort Furrow  
   Purr</span> guys went to 
   <span style="color: red; text-decoration: underline;">watc</span>
   <span class="suggestions" style="display: none;">WAC Wac Wat watch Watt watt WATS</span>
   movie yesterday.
</p>

Answer 1

你可以使用类似的东西

 $('span').not('.suggestions').click(function(){
     $(this).next('span').toggle();
 })

您将需要某种列表，您可以从中选择您的选项。因为从跨度来看会更难选择，但仍然可以，看看 here .

要进行更改，只需将单击的范围保存在某种变量中，然后将其中的文本替换为所选的文本

var $this;
 $('span').not('.suggestions').click(function(){
     $this = $(this);
     $(this).next('span').toggle();
 })

然后选择一个词后

$this.text(yourTextChosenVar)

UPD已添加Fiddle带有一些格式化的建议列表。

UPD2 完成 fiddle