悬停在不同链接上时创建具有不同内容的对话框答案

【问题标题】：Creating Dialog Box with Different Contents when Hovering on Different Links悬停在不同链接上时创建具有不同内容的对话框
【发布时间】：2014-03-05 16:54:43
【问题描述】：

我正在尝试创建链接列表，当鼠标悬停在不同的链接上时，会出现一个对话框，显示该链接的简短摘要内容。不同的链接内容应该不同。然后当鼠标离开链接时，框自动消失。这是我当前使用 jQuery UI 的代码：

<script type='text/javascript'>
$(document).ready(function(){
     function hovIn(){
        $("#info1").dialog({
            open : function ( event, ui ) {
            $(".ui-dialog-titlebar-close").hide();
        },
        dialogClass: "no-close",
        position: { my: 'center center', at: 'center top+300', within: window },
        autoOpen: true,
        modal : false,
        });
    }
    function hovOut() {
        $("#info1").dialog('close');          
    }

    $("#id1").hover(hovIn, hovOut);
    $("#id2").hover(hovIn, hovOut);
});

</script>
<body>
<a href=next.htm id='id1'>Link1</a><br><br><br>
<a href=back.htm id='id2'>Link2</a>
<div id='info1' title='Hello' style='display:none'>
<p id='info1_link'>How are you?</p></div>
<div id='info2' title='Goodbye' style='display:none'>
<p id='info2_link'>See you next time</p></div>
</body>

当鼠标悬停在 2 个链接上时，会出现相同的消息。有什么简单的方法可以省去为不同链接创建多对 hovIn 和 hovOut 函数的需要？或者，有没有办法将标题或文本内容传递给hovIn 和hovOut 函数？（附带的问题是，当我使用modal : true 时，对话框一直在闪烁。如何解决？）

【问题讨论】：

标签： javascript jquery html jquery-ui dialog

【解决方案1】：

我将尝试在始终显示相同内容的对话框中回答您的问题。您应该能够检查触发悬停事件的源的目标 ID（标签），如下所示，并相应地创建对话框。

通过在函数 hovIn 和 hovOut 的顶部插入以下行，可以使用适当的 div 标签创建对话框。

var targetDiv;
if (event.target.id == "id1") {
    targetDiv = "#info1";
} else if (event.target.id == "id2") {
    targetDiv = "#info2";
}
$(targetDiv).dialog({
....

【讨论】：