一页上有多个Jquery对话框

时间:2013-10-08 19:44:03

标签: javascript jquery html

我正在使用jquery对话框弹出窗口。 我有多个div(动态创建)需要在单个页面上弹出窗口。 我当前的问题是,当我点击.open时,所有(10)弹出窗口都打开了,我怎么才能触发一个呢?

我的HTML如下:

      <a class="open" href="#">
          <img src="/images/someImage1.jpg" />
      </a>

    <div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
    <p> Dialog text and stuff</p>
   </div>

   <a class="open" href="#">
          <img src="/images/someImage1.jpg" />
      </a>

    <div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
    <p> Dialog text and stuff</p>
   </div>

我的jquery如下:

   <script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css


  $(document).ready(function () {

      $('a.open').prop('id', function (i) {
          return '' + (i + 1);
      });

      $(".dialog").dialog({
              autoOpen: false,
              draggable: false,
              width: "300px",
              modal: true,
              buttons: {
                  "Close": function () {
                      $(this).dialog('destroy').remove()
                  }
              }

          });

      $("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")

   .click(function () {
  alert($(this).attr("id"));

  $(".dialog").dialog("open");
  return false;
   });
  });

    </script>

3 个答案:

答案 0 :(得分:2)

这应该有效(或其变体)。

$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
  alert($(this).attr("id"));

  $(this).next(".dialog").dialog("open");
  return false;
});

答案 1 :(得分:0)

我觉得有必要告诉你只使用一个类作为你的点击处理程序

$(".open").click(function(e) {
    e.preventDefault();
    $(this).next(".dialog").dialog("open");
});

如果您不使用ID,则无需使用ID。

答案 2 :(得分:0)

如果我正确地阅读您的代码,那么您正在做什么

$('.dialog').dialog('open');

即。您将掌握使用对话框类的所有元素。当然,这会同时打开所有对话框。如果您沿着

重写标记
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
  <p> Dialog text and stuff</p>
</div>

然后再做

$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.

我应该怀疑这个技巧