如何为同一 jquery 对话框的不同实例调用不同的操作

How do I invoke different actions for different instances of the same jquery dialog?

本文关键字：实例 调用 操作 jquery 对话框      更新时间：2023-09-26

我只是掌握了jquery-ui和对话框函数。 我的基本工作

原理如下： 
$("#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 元素(按钮 1/按钮 2(更改"是/否"按钮的操作？

我最好的猜测是回调函数和/或闭包，但我无法理解它。

经典而简单的方法是创建一个新对话框，而不是重用旧对话框。由于您在问题中没有这样做，因此我假设您出于任何原因都不想这样做;因此，您可以使用 data 属性：

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

还要考虑将title和callback参数绑定为按钮上的数据属性OpenCustomDialog将使处理程序看起来更干净

相关文章：