Question

我想使用按钮切换JQuery Dialog。

要替换对话框中的文字，请使用.replaceWith()

问题是，即使我已经设置了

，文本也不会被替换，并且对话框会显示出来

<div id="dialog-confirm" title="Can you confirm?" style="display: none;">

这是代码

(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Okay": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});

function showhide(iname) {
    var item = document.getElementById(iname).style;
    if (item.display == 'none') {
    item.display = '';
    } else {
    item.display = 'none';
    }
}

$('div.dialog-text').replaceWith( "<b>New text goes here</b>" );

可以在

现场试用

http://jsfiddle.net/littlesandra88/XxVtU/

另外，如果有更好的方法，请告诉我=）

Answer 1

文本替换似乎在Chrome 11，Firefox 4和IE 9中有效。出现该对话框是因为您正在初始化文档就绪事件处理程序中的对话框插件，并且jQuery UI设置了新样式（包括display ）到对话框。如果您希望隐藏它，请在之后隐藏它或仅在您需要时将其初始化。

由于它是一个模态对话框，单击链接以隐藏它将因覆盖而无法工作，因此您可能只想在需要显示时初始化对话框。为此，我将初始化代码从ready处理程序移动到showhide函数：

function showhide(iname) {
    $("#" + iname).dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Okay": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
}

http://jsfiddle.net/XxVtU/8/

<小时/> 作为T.J. Crowder在评论中提到，还有autoOpen: false，可以在初始化期间应用。我将你的小提琴修改为demonstrate this。

Answer 2

你在代码中所做的是说，

when the page finishs loading display a dialog box

为您的<a>代码指定一个ID，然后为您需要在初始化代码中添加处理程序。此外，您在文档就绪呼叫中使用了匿名函数function () { };这很好，但一段时间后它会变得有点杂乱..

例如：

 function init() 
    {
        $("#my_a_tag_id").click(showDialog);
    }

function showDialog() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Okay": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

$(document).ready(init);

Answer 3

如果您（由于某种原因）想要使用.replaceWith（）方法替换文本，您应该使用jQueryUI中可用的回调（在本例中为“create”或“open”回调“）

我已经添加了您自己代码的更新版本，正如我认为您尝试做的那样。

http://jsfiddle.net/XxVtU/7/

Answer 4

take a look at this;

$(document).ready(function(){
 $("#showhide").click(function() {
 $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                    "Okay": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });});$('div.dialog-text').replaceWith( "<b>New text goes here</b>" );});

在对话框上使用.replaceWith（）。怎么了？

4 个答案: