Javascript 如何为同一jquery对话框的不同实例调用不同的操作?
我刚刚开始熟悉jqueryui和对话框功能。我的基本原理如下:Javascript 如何为同一jquery对话框的不同实例调用不同的操作?,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我刚刚开始熟悉jqueryui和对话框功能。我的基本原理如下: $("#jquery-confirm").dialog({ dialogClass: "jQdialog", autoOpen : false, modal: true, buttons: { Yes: function() { $(this).dialog('close'); // do something for yes; }, No : function() {
$("#jquery-confirm").dialog({
dialogClass: "jQdialog",
autoOpen : false,
modal: true,
buttons: {
Yes: function() {
$(this).dialog('close');
// do something for yes;
},
No : function() {
$(this).dialog('close');
// do something for no;
}
}
});
然后我可以调出对话框:
$("#button1").click(function() {
OpenCustomDialog("Title 1");
});
function OpenCustomDialog(title) {
$("#jquery-confirm").dialog("option", "title", title);
$("#jquery-confirm").dialog('open');
}
这很好,但现在我想使用相同的对话框,但指定附加到“是/否”按钮的不同操作:
$("#button2").click(function() {
OpenCustomDialog("Title 2");
});
根据调用对话框的HTML元素(button1/button2),如何更改Yes/No按钮的操作
我最好的猜测是回调函数和/或闭包,但我无法理解。经典而简单的方法是创建一个新对话框,而不是重复使用旧对话框。既然你在问题中没有这样做,我假设你不想出于任何原因这样做;因此,您可以使用
数据属性:
var callbacks = {
yes: {
b1: function() { /*do something*/ }
b2: function() { /*do something*/ }
},
no: {
b1: function() { /*do something else*/ }
b2: function() { /*do something else*/ }
}
};
// ... etc.
buttons: {
Yes: function() {
$(this).dialog('close');
callbacks.yes[$(this).data("callback-target")]();
},
No : function() {
$(this).dialog('close');
callbacks.no[$(this).data("callback-target")]();
}
}
// .. etc.
$("#button1").click(function() {
OpenCustomDialog("Title 1", "b1");
});
function OpenCustomDialog(title, callback) {
$("#jquery-confirm").dialog("option", "title", title);
$("#jquery-confirm").data("callback-target", callback);
$("#jquery-confirm").dialog('open');
}
也考虑绑定<代码>标题>代码>回调<代码>参数> OpenCuStutoCudio >按钮上的数据属性将使处理程序看起来更干净
< P>经典而简单的方法是创建一个新对话框而不是重用旧对话框。既然你在问题中没有这样做,我假设你不想出于任何原因这样做;因此,您可以使用数据属性:
var callbacks = {
yes: {
b1: function() { /*do something*/ }
b2: function() { /*do something*/ }
},
no: {
b1: function() { /*do something else*/ }
b2: function() { /*do something else*/ }
}
};
// ... etc.
buttons: {
Yes: function() {
$(this).dialog('close');
callbacks.yes[$(this).data("callback-target")]();
},
No : function() {
$(this).dialog('close');
callbacks.no[$(this).data("callback-target")]();
}
}
// .. etc.
$("#button1").click(function() {
OpenCustomDialog("Title 1", "b1");
});
function OpenCustomDialog(title, callback) {
$("#jquery-confirm").dialog("option", "title", title);
$("#jquery-confirm").data("callback-target", callback);
$("#jquery-confirm").dialog('open');
}
也考虑绑定<代码>标题>代码>回调<代码>参数> OpenCuStutoCudio >按钮上的数据属性将使处理程序看起来更干净
您可以为每个事件定义分离函数并绑定它们。在切换方法时,只需解除前一个事件的绑定并使用新的处理程序重新绑定即可。您可以为每个事件定义单独的函数并根据需要绑定它们。在切换方法时,只需解除前一个事件的绑定并使用新的处理程序重新绑定即可。感谢您的回答,这非常有帮助。我曾考虑过使用单独的对话框,但我试图做到“高效”——我有四到五个地方想使用不同的提示来回答是/否。谢谢你的回答,这非常有帮助。我曾考虑过使用单独的对话框,但我试图做到“高效”——我有四到五个地方需要使用不同的提示来返回是/否答案