jquery - 创建对话框的多个实例

Question

我是 jQuery 和 java 的新手，我真的很想集中精力创建对话框的多个实例。我在头部使用这个:

 <script src="external/jquery/jquery.js"></script>
 <script src="jquery-ui.js"></script>

如果我只有 1 个按钮和一个对话框，它就可以工作。但是当我添加另一个时它就停止工作了。我相信这很容易解决，我只是在挣扎。

        <h2>subjects</h2>

        <button id="opener">maths</button>

        <div id="dialog" title="Dialog Title">maths is an important subject.</div> <br> 

      <button id="opener">english</button>

        <div id="dialog" title="Dialog Title">this is also very important</div> <br>

       <script>

        $( "#dialog" ).dialog({ autoOpen: false });
        $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
                                         });
        </script>

Answer 1

http://jsfiddle.net/y7952dmf/

1. ID 必须是唯一的，因此使用该类以便同时与多个其他元素配合使用
2. 例如，要链接按钮和对话框，请使用具有相同值的按钮的 data-id 和对话框的 id

HTML:

<h2>subjects</h2>

<button class="opener" data-id="#dialog1">maths</button>
<div class="dialog" id="dialog1" title="Dialog Title">maths is an important subject.</div>
<br>

<button class="opener" data-id="#dialog2">english</button>
<div class="dialog" id="dialog2" title="Dialog Title">this is also very important</div>
<br>

JQ:

//create all the dialogue
$(".dialog").dialog({
    autoOpen: false
});

//opens the appropriate dialog
$(".opener").click(function () {
    //takes the ID of appropriate dialogue
    var id = $(this).data('id');
   //open dialogue
    $(id).dialog("open");
});