Question

我刚刚开始使用Jquery，我想知道是否有办法重用多个ID的对话框。我正在使用该对话框显示多个项目的更深入的描述。我现在的代码设置方式是：

            $('#NY7C').dialog({
                autoOpen: false,
                width: 800,
                height: 700,
                modal: true,
                draggable: false
            });

            $('#NY7C-open').click(function(){
                $('#NY7C').dialog('open');
                return false;
            });

            $('#NY7R').dialog({ //another dialog that has the same features as #NY7C
            });

            $('#NY7R-open').click(function(){
            })

在正文中我使用以下代码打开对话框：

<a id="NY7C-open" class="ui-state-default ui-corner-all" href="#">More Info</a>
<a id="NY7R-open" class="ui-state-default ui-corner-all" href="#">More Info</a>

最后，对话框中显示的信息位于：

<div id="#NY7C">
    //Information for NY7C
</div>
<div id="#NY7R">
    //Information for NY7R
</div>

现在，我现在拥有代码的方式可行。但是，我希望我能够重用第一个代码，这样我就可以将它用于多个ID（例如NY7C，NY7R，NY7P等）。有没有办法做到这一点？

Answer 1

您可以将类添加到类似的对话框

<div id="#NY7C" class="dialog">
    //Information for NY7C
</div>
<div id="#NY7R" class="dialog">
    //Information for NY7R
</div>

然后再做

$('.dialog').dialog({});

Answer 2

这个怎么样......

function attachDialog(elementId) {
    $(elementId).dialog({
        autoOpen: false,
        width: 800,
        height: 700,
        modal: true,
        draggable: false
    });

    $(elementId + 'open').click(function() {
        $(elementId).dialog('open');
        return false;
    });

}

attachDialog('#NY7C');
attachDialog('#NY7R');

Answer 3

给他们上课而不是ids。例如：

<a id="NY7C-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a>
<a id="NY7R-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a>

<div id="#NY7C" class="my-dialog">
    //Information for NY7C
</div>
<div id="#NY7R" class="my-dialog">
    //Information for NY7R
</div>

js将是：

$('.my-dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 700,
    modal: true,
    draggable: false
});
$('.dialog-trigger').click(function(){
    var id = this.id;
    var targetId = id.replace('-open','');
    var $target = $('#' + targetId);
    if($target.length){
        $target.dialog('open');
        return false;
    }
});

JQuery Dialog - 重用不同id的代码

3 个答案: