Question

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

我有一个有40个按钮的表单，每个按钮都有一些使用javascript确认的确认类型。我想将它们切换为使用jquery模式对话框。

我编写了几个像下面这样的程序，它们工作正常。问题是表格上有40个 - 所以不想要编程40个单独的模态框。唯一真正改变的是单击Yes按钮时调用的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>

Answer 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个按钮来说是这样的：）

Answer 2

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

我不知道你的click（）函数是什么样的，但很容易在那里使用例如你点击的链接上的rel属性，类等来添加变量。取决于变量，你可以执行所需的功能。

避免多个（40）jquery确认对话框 - 重用？

2 个答案: