Question

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

我正在尝试为元素“help”动态生成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。关于我做错了什么的任何想法？在这一点上我已经待了大约一天半......

Answer 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。

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

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

2 个答案: