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

Show and hide dynamic jQuery UI Dialogs

本文关键字：UI 对话框 jQuery 动态 隐藏 显示      更新时间：2023-09-26

我知道这应该很简单，但它似乎并没有按照我希望的方式工作。

我正在尝试为元素"帮助"动态生成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');
});

编辑：将代码更新到当前版本。对话框状态和对话框（'打开'）/对话框（'关闭'）的值仍然存在问题。

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

也许将

声明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。

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

$("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 分解为单独的变量。

相关文章：