0

我只是 jQuery 和 UI 的新手。请给我关于下面代码的建议。我想通过单击按钮在同一页面上显示 jquery 对话框窗口。需要你的帮助。谢谢，肖。

HTML：

<button id="opener_1">Enlarge</button>
<div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large1.jpg" style="display:none" />
</div>

 <button id="opener_2">Enlarge</button>
 <div id="dialog_2" title="Dialog Title">Enlarge
  <img class="large_2" src="./large2.jpg" style="display:none" />
</div>

<button id="opener_3">Enlarge</button>
<div id="dialog_3" title="Dialog Title">Enlarge
  <img class="large_3" src="./large3.jpg" style="display:none" />
</div>

 <button id="opener_1">Enlarge</button>
 <div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large1.jpg" style="display:none" />
  </div>

 <button id="opener_1">Enlarge</button>
 <div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large2.jpg" style="display:none" />
</div>

<button id="opener_1">Enlarge</button>
<div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large3.jpg" style="display:none" />
</div>

Javascript：

$(function(){
    for (var i = 0; i <= button.length; i++) {
        $(function () {
            $('#dialog_' + [i]).dialog({
                autoOpen: false,
                modal: false,
                width: "auto",
                height: "auto"
            })
        });
        $(function(){
            $('#opener_' + [i]).click(function () {
                $('.large_' + [i]).dialog('open');
            });
        });
}
4

1 回答 1

1

首先，ID 属性必须是唯一的。

给定以下 HTML

<button id="opener_1">Enlarge</button>
<div class="dialog" title="Dialog Title">Enlarge 1
  <img class="large_1" src="./large1.jpg" style="display:none" />
</div>

 <button id="opener_2">Enlarge</button>
 <div class="dialog" title="Dialog Title">Enlarge 2
  <img class="large_2" src="./large2.jpg" style="display:none" />
</div>

 <button id="opener_3">Enlarge</button>
 <div class="dialog" title="Dialog Title">Enlarge 3
  <img class="large_3" src="./large3.jpg" style="display:none" />
</div>

你可以使用这个 Javascript

$(function(){
    $('.dialog').dialog({
        autoOpen: false,
        modal: false,
        width: "auto",
        height: "auto"
   });

    $('button').each(function(i) {
        var el = $(this);
        el.click(function () {
            $('.dialog').dialog('close'); // Close all open dialogues
            $('.dialog').eq(i).dialog('open'); // Open relevant dialogue
        });
    });
});

工作示例http://fiddle.jshell.net/q2cU2/1/

于 2013-10-09T17:34:28.240 回答