Question

我想允许我的页面的查看者点击段落中的任何单词来触发工具提示（如单词定义或其他一些事件），但我不想使用包含在每个单词周围的标签来膨胀我的html。

我想要的效果类似于纽约时报在他们的文章中所做的。双击NYT文章中的任何单词都会显示工具提示，可以单击该工具提示以获取更多信息。 Example.但是你会注意到源代码中原始页面中没有这些工具提示的标记。

这可以用jQuery实现吗？像是，点击任何单词？

Answer 1

它实际上不是点击，我认为是选择。

查看this插件。

<强>更新

我也发现了关于stackoverflow的类似讨论：Tooltip triggered by text selection

Answer 2

也许你可以尝试这样做：

var openTag = "<a href='#' onclick='javascript:wordAction(this)'>";
var closeTag = "</a>"

var paragraph = $("#paragraph");
var newParagraphHtml = paragraph.html().replace(" ", closeTag + openTag + " ");
paragraph.html(openTag + newParagraphHtml + closeTag);

var wordAction = function(el) {
    var word = el.html();  
    // do wat you want with your word
}

此致

jQuery - 为段落中的每个单词分隔onClick事件

2 个答案: