javascript - 突出显示部分文本并显示信息对话？

Question

我正在我的博客上工作，不知道如何制作一个 javascript 来突出显示我的文本的某些部分并提供更多信息。像：

我在我的电脑上工作

如果我单击 pc，则在 Jquery UI 对话框中有一个窗口和更多信息。

我自己尝试过，但我必须为我想要的每一个信息创建一个 div。然后我能够打开一个盒子

$(foo).dialog('open')

我认为这是太多的 div。你能给我一个简单的解决方案吗？

Answer 1

很难说你真正需要什么。下次你应该提供更多代码......但我会试一试：我不知道你如何提供文本的突出显示，但我认为这个演示可以帮助你。

HTML：

<p> Text blabla
<span data-title="Title 1" data-text="Text 1" class="a2u">Highlight 1</span>
more blabla
<span data-title="Title 2" data-text="Text 2" class="a2u">Highlight 2</span>
more blabla
<span data-title="Title 3" data-text="Text 3" class="a2u">Highlight 3</span>
more blabla
</p>

Javascript：

$().ready(function() {
    $("#alert2ui").dialog({
        autoOpen: false
    });
    $(".a2u").click(function() {
        $("#alert2ui").dialog("option", "title", $(this).attr("data-title"));
        $("#alert2ui").html($(this).attr("data-text"));
        $("#alert2ui").dialog('open');
    });
});​

您通过给定的文本突出显示文本，css class并使用 html5data-*属性设置详细信息。