避免多个 (40) jquery 确认对话框 - 重用？答案

【问题标题】：Avoid Multiple (40) jquery confirmation dialog boxes - reuse?避免多个 (40) jquery 确认对话框 - 重用？
【发布时间】：2009-09-12 15:30:25
【问题描述】：

我正在使用 jQuery 修复遗留的 Web 应用程序。

我有一个包含 40 个按钮的表单，每个按钮都有某种类型的使用 javascript 确认的确认。我想切换这些以使用 jquery 模态对话框。

我已经对其中的几个进行了如下编程，它们工作正常。问题是表单上有 40 个 - 所以不想编写 40 个单独的模态框。唯一真正改变的是单击“是”按钮时调用的 javascript

有什么建议吗？

按钮调用代码：

$("#confirm1dialogTitle").html("Approve?");
$("#confirm1dialogText").html("Do you want to approve this request?");
$('#confirm1dialog').dialog('open');

嵌入式javascript：

<script type="text/javascript">
$(function() {
    $("#confirm1dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        width: 350,
        height: 350,
        modal: true,
        buttons: {
            'Yes': function() {
                window.document.forms[0].FDDStatus.value = "Approved";
                window.document.forms[0].DivisionApproval.value = "Yes";
                window.document.forms[0].setApprovalFields();
            },
            'No': function() {
                $(this).dialog('close');
            }
        }
    });
});
</script>

嵌入式 HTML：

<div id="confirm1dialog" title="<span id='Title'>Title</span>">
   <div id="users-contain" class="ui-widget">
      <form>
         <span id="confirm1Text"></span>
      </form>
   </div>
</div>

【问题讨论】：

这个问题和这个问题有什么不同？ stackoverflow.com/questions/904447/… 对不起，如果我错过了什么......

标签： javascript jquery html css

【解决方案1】：

您可以将正在更改的 javascript 放入函数对象中，然后重用它..

让我们假设你看起来像这样：

<form><input id='btn1' /><input id='btn2' /></form>

然后你创建一个辅助函数：

var confirmHelper = function(id, yesCallback) {
  $(id).click(function() {
    $(function() {
      // the code from you example
      $("#confirm1dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        width: 350,
        height: 350,
        modal: true,
        buttons: { 'Yes': yesCallback, 'No': function() { } }
      }
    }
  }
}

然后你将它应用到你的按钮上：

confirmHelper('btn1' function() {
  // your callback from before
  window.document.forms[0].FDDStatus.value = "Approved";
  window.document.forms[0].DivisionApproval.value="Yes";                                   
  window.document.forms[0].setApprovalFields();
});

confirmHelper('btn2' function() {
  // your other javascript code
});

就像 40 个按钮一样 :)

【讨论】：

【解决方案2】：

您可以在 javascript 中编写 40 个函数（按下是按钮时必须执行的函数）并且只使用一个模态框。

我不知道你的 click() 函数是什么样子的，但很容易在其中添加一个变量，例如使用你单击的链接上的 rel 属性、类等。根据变量，您可以执行所需的功能。

【讨论】：