jquery在同一页面上的多个对话框

Question

我想知道是否有办法将脚本合并到文档的头部，这样当您有多个对话框时，您的头部就不会占用这么大的块？例如，如果您有 10 多个对话框，您将输入 10 次以下内容。这是超级多余的。有没有办法只说#dialog1-20 并将所有内容合二为一？

javascript：

// Dialog 1
$('#dialog1').dialog({
  stack: false,
  autoOpen: false,
  width: 500,
  buttons: {
     "OK": function() {
       (...some action...)
     },
     "Close": function() { 
       $(this).dialog("close"); 
     }
  }
});

// Dialog Link 1
$('#id_1').click(function(){
  $('#dialog1').dialog('open');
  return false;
});

// Dialog 2 
$('#dialog2').dialog({
  stack: false,
  autoOpen: false,
  width: 500,
  buttons: {
     "OK": function() {
       (...some action...)
     },
    "Close": function() { 
      $(this).dialog("close"); 
    }
  }
});

// Dialog Link 2
$('#id_2').click(function(){
  $('#dialog2').dialog('open');
  return false;
});

HTML：

<div id='dialog1' title='title1' style='display: none;'>(...)</div>

<div id='dialog2' title='title2' style='display: none;'>(...)</div>

编辑：

正如建议的那样（感谢 Pietu1998、Ed 和 Osama.070032），我改变了课堂风格，但我仍然缺少一些东西。此外，我需要在元素之间传递变量，这是我不知道该怎么做的事情。我的代码现在如下所示 - 您可以在下面的 cmets 中看到我的问题：

<script type='text/javascript'>
$(function(){
 for (i = 0; i <= <? echo $items_count; ?>; i++) {
 $('#dialog_name_' + i).dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: {
            'Cancel': function() {
                $(this).dialog('close');
            },
            'OK': function() {
                    $.ajax({
                        url: 'some_file.php',
                            type: 'POST',
                            data: 'item_id=' + i,// here I need to pass variable
                    });
                    $(this).dialog('close');
            }
        }
  });
  $('#link_dialog_name_' + i).click(function(){
    $('#dialog_name_' + i).dialog('open');
    return false;
  });
}// for end
});
</script>

<?
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {// I am wondering if I can get rid of this loop and pass variable to see item's name below
?>
  <a href='#' id='link_dialog_name_<? echo $line["item_id"]; ?>'></a>

  <div id='dialog_name_<? echo $line["item_id"]; ?>' title='Name' style='display: none;'>
  <?

    if ($line["name"]=="") {
      echo "Number 1 does not have any name.";
    } else {
      echo "The name of number 1 is ".$line["name"];
    }

}// while end
?>

Answer 1

正如@Pietu1998 在 cmets 中所说，使用共同的class 引用所有元素是最简单的方法。如果你不能这样做，只需创建一个元素名称数组并循环它。

示例（更新和测试）：

// Variables for setting up our dialogs
var dialogs = {
    dialog1: {id: 'id_1', func: 'foo'},
    dialog2: {id: 'id_2', func: 'bar'},
    dialog42: {id: 'id_42', func: 'baz'}
    /* etc. */
    };
window.dialogs = dialogs; // to make it accessible globally if not already -- this is a jsFiddle quirk

// Functions for the OK button actions
window.foo = function() {
    alert('foo called');
}
window.bar = function() {
    alert('bar called');
}
window.baz = function() {
    alert('baz called');
}

// A handler for all of the OK buttons
function callOKButtonAction( dialog_name ) {
    var tmpfunc = new Function(dialogs[dialog_name].func + '()' );
    tmpfunc();
}

// Initialize the dialogs
$(function() {
    for(var dialog_name in dialogs) {
        if(typeof(dialogs[dialog_name].id) !== 'string') {
            continue;
        }
        // Dialog
        $('#' + dialog_name).dialog({
            stack: false,
            autoOpen: false,
            width: 500,
            buttons: {
                "OK": function() {
                    callOKButtonAction( $(this).prop('id') );
                },
                "Close": function() { 
                    $(this).dialog("close"); 
                }
            }
        });
    }

    // Dialog Links
    $('.dialog_trigger').click(function(){
        var id = $(this).prop('id');
        for(var dialog_name in dialogs) {
            if(typeof(dialogs[dialog_name].id) !== 'string') {
                continue;
            }
            if( id == dialogs[dialog_name].id ) {
                $('#'+dialog_name).dialog('open');
            }
        }
        return false;
    });
});

jsFiddle demo

Answer 2

最好的办法就是像@Pietu1998在评论中说的那样添加一个类。

然后你可以在类上调用 dialog 方法，它会在所有具有该类的元素上自动调用。