如何对Jquery UI对话框弹出窗口进行分组？

Question

我现在正在使用http://jqueryui.com/dialog/#animated插件。 我需要帮助扩展它以供使用。

<script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

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


<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog1</button>

我想像这样扩展此脚本，而无需重复javascript代码：

<div id="dialog" title="Basic dialog1"><p>content1</p></div>
<div id="dialog" title="Basic dialog2"><p>content2</p></div>
<div id="dialog" title="Basic dialog3"><p>content3</p></div>


<button id="opener">Open Dialog1</button>
<button id="opener">Open Dialog2</button>
<button id="opener">Open Dialog3</button>

是否可以对所有这些事件弹出窗口进行分组，以使我不会超载JavaScript？

Answer 1

尝试这个，

<script>
      $(function() {
        $( ".dialog" ).dialog({
          autoOpen: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 1000
          }
        });

        $( ".opener" ).click(function() {
          var id = $(this).attr("id");
          $( "#dialog"+id ).dialog( "open" );
        });
      });
      </script>

    <div id="dialog_1" title="Basic dialog1" class="dialog"><p>content1</p></div>
    <div id="dialog_2" title="Basic dialog2" class="dialog"><p>content2</p></div>
    <div id="dialog_3" title="Basic dialog3" class="dialog"><p>content3</p></div>


    <button id="_1" class="opener">Open Dialog1</button>
    <button id="_2" class="opener">Open Dialog2</button>
    <button id="_3" class="opener">Open Dialog3</button>