显示和隐藏动态 jQuery UI 对话框答案

【问题标题】：Show and hide dynamic jQuery UI Dialogs显示和隐藏动态 jQuery UI 对话框
【发布时间】：2025-12-06 08:05:02
【问题描述】：

我知道这应该很简单，但它似乎并没有像我希望的那样工作。

我正在尝试为元素“帮助”动态生成 jQuery UI 对话框。

我想在关闭时切换对话框的可见性（对话框中的 x 按钮），然后单击帮助图标。这样，用户应该能够在页面查看期间根据需要多次调出对话框并删除它。

// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
    $(Element).dialog({
        autoOpen: false,
        title: $(Element).attr("title"),
        dialogClass: 'tooltip-dialog'
    });
});
$("a.help").live("click", function (event) {
    var helpDiv = "div#" + $(this).closest("span.help").attr("id");
    var dialogState = $(helpDiv).dialog("isOpen");
    // If open, close. If closed, open.
    dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});

编辑：将代码更新到当前版本。 dialogState 和 dialog('open')/dialog('close') 的值仍然存在问题。

我可以从每个中的 $(Element).dialog("isOpen") 获得一个真/假值。当我稍后尝试查找元素时（使用稍微不同的选择器），我似乎无法成功调用 $(helpDiv).dialog("isOpen")。这将返回 [] 而不是 true/false。关于我做错了什么有什么想法吗？在这一点上，我已经在这里待了大约一天半......

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-dialog jquery-dialog

【解决方案1】：

也许将声明dialogState 的行替换为var dialogState = ! $(helpDiv).dialog( "isOpen" );。

解释：$(helpDiv).dialog( "option", "hide" ) 不测试对话框是否打开。它获取关闭对话框时将使用的效果类型。要测试对话框是否打开，您应该使用$(helpDiv).dialog( "isOpen" ). 更多详细信息，请参阅http://jqueryui.com/demos/dialog/#options 和http://jqueryui.com/demos/dialog/#methods。

【讨论】：

感谢您提供的信息。根据您的建议，我已经修改了代码。但是，该对话框永远不会显示。该方法似乎确实连接到“单击”事件......由于某种原因，dialogState 的值不是真/假。它在萤火虫中显示为 []。有什么想法吗？
我在你的代码中看到了一些奇怪的东西。在您的helpDiv 声明中，看起来您正在搜索具有与其他地方的跨度相同的 id 属性的 div。 id 属性应该是元素的唯一标识符，并且具有多个具有相同 id 的元素可能会导致 Javascript 问题。有关更多信息，请参阅*.com/q/7505350/28324。
另一件事：由于某种原因，如果您在不是对话框的东西上调用dialog("isOpen")，它似乎会返回一个元素数组。这可能是因为 id 属性的问题，helpDiv 可能没有引用您想要的内容。

【解决方案2】：

我能够使用以下代码使其工作：

$("div.tooltip").each(function (index, Element) {
    var helpDivId = '#d' + $(Element).attr('id').substr(1);
    var helpDiv = $(helpDivId).first();
    $(Element).dialog({
        autoOpen: true,
        title: $(Element).attr("title"),
        dialogClass: 'tooltip-dialog'
    });
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
    var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
    var helpDiv = $(helpDivId).first();
    var dialogState = helpDiv.dialog('isOpen');

    dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});

我更改了选择器，使它们相同，而不是只选择相同的元素。我还将 Id、div 和 state 分解为单独的变量。

【讨论】：