0

我刚开始使用 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 等）。有没有办法做到这一点？

4

3 回答 3

0

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

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

然后做

$('.dialog').dialog({});
于 2012-07-27T16:08:03.200 回答
0

那这个呢...

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');
​
于 2012-07-27T16:10:11.530 回答
0

给他们类而不是 id。例如：

<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;
    }
});
于 2012-07-27T16:10:28.440 回答