Question

我一直在尝试使用jQuery UI的对话框功能来解决一个看似简单的问题。在特定搜索结果页面上，每个结果可能包含一些带有帮助链接的符号。理想情况下，每个帮助链接都会打开一个对话框，其中包含该特定项目的自定义说明。结果的HTML片段可能如下所示：

<table border=1>
    <tr>
        <td>Text (<a class='helplink' href='#'>?</a>)
            <div class='dialog' title='mytitle'>Here's some dialog text</div>
        </td>
        <td>Text 2 (<a class='helplink' href='#'>?</a>)
            <div class='dialog' title='mytitle2'>Here's some dialog text for result 2</div>
        </td>
</tr>

我原本认为我可以将click事件绑定到锚点并使用下一个（＆＃39; div.dialog＆＃39;）选择器来查找并显示对话框。但是一旦div被对话框“ifier”处理，它就会移动到dom中的其他地方而不再是兄弟姐妹。这是我想要完成的Fiddle。

有人可以推荐更好的方法吗？虽然我可以假设使用每个结果中的一些数据为每个元素生成一个唯一的ID，但我真的试图避免这种情况，并且有更优雅的东西。我觉得我错过了一些明显的东西。

Answer 1

所以根据评论，这是我目前正在使用的解决方案。每个帮助链接都没有唯一的对话框实例，而是有一个共享对话框。数据属性在link元素上使用，以便存储特定于链接的标题和对话框的主体。单击链接时，将使用链接特定值更新公共对话框并打开。因为对话框内容可以假设包含html，我仍然在链接旁边的原始html中的div中渲染数据，然后使用jQuery将其复制到数据属性中，而不是尝试渲染它并处理转义所有内容。

以下是生成的代码和指向已更新Fiddle的链接。

<table border=1>
<tr>
    <td>Text (<a class='helplink' href='#' data-title='mytitle'>?</a>)
        <div class='content'>test text with <a href='#'>link</a></div>
    </td>
    <td>Text 2 (<a class='helplink' href='#' data-title='mytitle2'>?</a>)
        <div class='content'>test text 2 with <a href='#'>link2</a></div>
    </td>
</tr>
</table>
<div id="commonDialog" title="origTitle">origContent</div>

和

$(function () {
    $('#commonDialog').dialog({
        modal: true,
        autoOpen: false,
        closeOnEscape: true
    });
    $('a.helplink').each(function () {
        // copy the div content into the data attribute and remove the div
        $(this).data('content', $(this).siblings('div.content').html());
        $(this).siblings('div.content').remove();
    }).click(function (e) {
        e.preventDefault();
        // populate the dialog title and body
        var d = $('#commonDialog');
        d.html($(this).data('content'));
        d.siblings('.ui-dialog-titlebar').children('span').text($(this).data('title'));
        // and display it
        d.dialog('open');
    });
});

欢迎任何关于清理我的选择器或其他改进的其他建议。

从兄弟链接元素打开jquery对话框，而不使用基于ID的选择器

1 个答案: