使用 Jquery 更改 div 的内容（带参数的 Jquery 对话框）答案

【问题标题】：Change the content of a div using Jquery (Jquery dialog with parameters)使用 Jquery 更改 div 的内容（带参数的 Jquery 对话框）
【发布时间】：2012-04-11 10:35:15
【问题描述】：

我正在开发一个 ASP.NET 网站（MVC3，但对我的问题并不重要）

当用户单击要打开 Jquery 模态对话框的链接时，我的页面上有一些链接：

http://jqueryui.com/demos/dialog/#modal-message

对于每个链接，我希望显示不同的对话框。

据我了解，我必须在我的页面上的 <div> 中指定对话框的内容。例如：

<div id="dialog" title="Basic dialog">
    <p>Here we put the content of the dialog</p>
</div>

链接是动态生成的，我不想为每个链接创建一个 div。对话框的内容也取决于链接发送的参数

我会尽量解释我想要什么。

如果可能的话，我想要做的是：

我有一个 div

<div id="dialog" title="Basic dialog">
</div>

当用户点击链接1时，一个函数被调用ShowDialog(FirstName1, LastName1)

该函数会将参数作为字符串添加到div“对话框”并打开对话框。

当用户点击链接2时，'div'“对话框”被清除，新内容由ShowDialog(FirstName2, LastName2)函数填充并打开对话框。

所有应该做的是 Jquery 或 Javascript。

我希望我很清楚。如果需要更多信息，请询问。

【问题讨论】：

标签： jquery jquery-ui modal-dialog

【解决方案1】：

您尚未指定从何处检索 firstname 和 surname 值，因此我已将它们分配给链接的 data-* 属性，如下所示：

<a href="#" data-firstname="Foo" data-surname="Bar">Click me</a>

$("#dialog").dialog({ /* settings */ });

$("#link2").click(function() {
    var $el = $(this);
    var fn = $el.data("firstname");
    var sn = $el.data("surname");
    ShowDialog(fn, sn);
});

function ShowDialog(firstname, surname) {
    // Here you can do whatever is required to the dialog, create elements, change text, go nuts.
    $("p", "#dialog").text("Hello " + firstname + " " + surname); 

    // Show the dialog
    $("#dialog").dialog('open');
}

【讨论】：