0

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

$(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'); });
})

但我很确定这可以以某种方式美化。他们都打开和关闭不同的盒子，所以我不知道。如果他们都在做完全相同的功能，我知道该怎么做，但是映射这种变化现在超出了我的范围。

4

3 回答 3

1

您可以一次使用多个选择器，方法是用逗号分隔它们。

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

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

于 2012-10-04T04:41:36.813 回答
1

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

$(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');
            });
于 2012-10-04T04:56:11.823 回答
0

重新审视旧问题，在永远这样做之后，现在该怎么办：

$(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 中创建的元素中，而且我可以如果我也需要这样做，请使用另一个将按钮处理程序的 ID 附加为数据属性的 js 函数。

对我来说就像一个魅力，它就像我现在能得到的一样干净。仍在寻找任何可以改进这一点的人。

于 2013-06-02T20:08:51.603 回答