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

これはどうですか...

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 に答える
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 に答える