創建對話框的多個實例

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"); 
});