2

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

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

4

2 回答 2

3

也许将声明的行替换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。

于 2012-05-15T17:48:20.643 回答
1

I was able to get it working using the following code:

$("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');
});

I changed the selectors so that they're identical, instead of just selecting the same element. I also broke out the Id, div and state into separate variables.

于 2012-05-16T13:44:57.040 回答