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）我改变了阶级风格，但我仍然缺少一些东西。另外我需要在元素之间传递变量，这是我不知道该怎么做的。我的代码现在如下所示 - 您可以在下面的评论中看到我的问题：

<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在评论中所说，提及具有共同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方法，它将在具有该类的所有元素上自动调用。

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

2 个答案: