创建对话框的多个实例

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

ID用于告诉它你正在使用什么对象。你需要给他们单独的名字，让它知道该怎么处理。

<h2>subjects</h2> 

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

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

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

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

    <script> 

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

这应该是你在找什么。

Answer 2

http://jsfiddle.net/y7952dmf/

1. ID必须是唯一的，因此所使用的类，以便与的同时
2. 要按钮链接按钮，例如对话框，使用的数据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"); 
});