Question

我是jQuery和java的新手，我真的想要创建一个对话框的多个实例。我正在使用它：

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

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

        <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/

ID必须是唯一的，因此使用该类才能与同时的其他几个元素一起使用
例如，要链接按钮和对话框，请使用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");
});

Answer 2

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>

这应该是你要找的。

创建多个对话框实例

2 个答案: