组合多个jQuery对话框选择器

Question

我想知道如何结合不同选择器的功能。 所有功能都打开和关闭对话框，但不同的对话框。 所以我不知道是否可能。 它只是看起来不对劲，如果有人看到它，他们会称我为白痴。 现在我有：

$(document).ready(function() {
    $('div#basic_dialog').dialog({
        autoOpen: false,
        buttons: {
            "Close": function () {
                $('div#basic_dialog').dialog("close");
                window.location.href = "#contact";
            }
        }
    })
    $('#basic_dialog_button').click(function(){ $('div#basic_dialog').dialog('open'); });
    $('div#caption_dialog').dialog({
        autoOpen: false,
        buttons: {
            "Close": function () {
                $('div#caption_dialog').dialog("close");
                window.location.href = "#contact";
    }
    }
    })
 $('#caption_dialog_button').click(function(){ $('div#caption_dialog').dialog('open'); });
    $('div#plus_dialog').dialog({
    autoOpen: false,
    buttons: {
        "Close": function () {
                $('div#plus_dialog').dialog("close");
        window.location.href = "#contact";
    }
    }
    })
$('#plus_dialog_button').click(function(){ $('div#plus_dialog').dialog('open'); });
$('div#skills_dialog').dialog({
    autoOpen: false,
    buttons: {
    "Close": function () {
        $('div#skills_dialog').dialog("close");
        window.location.href = "#contact";
    }
    }
})
$('#skills_dialog_button').click(function(){ $('div#skills_dialog').dialog('open'); });
})

但我很确定这可以以某种方式被美化。 他们都打开和关闭不同的盒子，所以我不知道。 我知道如果他们都在完全相同的功能，如何做到这一点，但现在我已经超出了我的范围。

Answer 1

您可以使用逗号分隔多个选择器 。

$('div#basic_dialog, div#caption_dialog, etc...')

但是，对于像你这样的情况，我想我会推荐使用一个类。

Answer 2

您可以指定任意数量的选择器组合成单个结果。 你可以像这样使用：

$(document).ready(function() {
        $('div#basic_dialog,div#caption_dialog,div#plus_dialog,div#skills_dialog').dialog({
            autoOpen: false,
            buttons: {
                "Close": function() {
                    $('div#basic_dialog').dialog("close");
                    window.location.href = "#contact";
                }
            }
        })
        $('#basic_dialog_button,#caption_dialog_button,#plus_dialog_button,#skills_dialog_button').click(function() {
            $('div#basic_dialog').dialog('open');
        });
    })

编辑
给每个可点击元素公共类，可以使用如下：

            $('.dialog_button').click(function() {
                $(this).dialog('open');
            });

Answer 3

重温旧问题，现在永远这样做，现在会做什么：

$(function(){
    var close = function(){
        $(this).dialog("close");
        window.location.href = "#contact";});

    $(".dialog").dialog({
        autoOpen: false,
        buttons: {
            "Close": close
        }});

    $(".dialog-button").click(function(){
        var db = $(this).attr("data-val");
        $("#"+db).dialog('open');});
});

然后我只将类.dialog添加到所有对话框元素和唯一ID。 对于按钮处理程序，我将其控制的对话框的ID添加为数据属性。 这种方式的好处是我甚至可以将它们设置为vars，然后在我动态创建更多对话框（如果需要）之后运行这些函数，并且它将继续将对话框功能添加到尚未在DOM中创建的元素，而且我可以使用另一个js函数，如果我需要这样做，它会将按钮处理程序的ID附加为数据属性。

对我来说就像一个魅力，它就像我现在所能得到的一样干净。 还在寻找能够改善这一点的人。