多個Jquery對話框在一個頁面上

Question

我正在使用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> 

Answer 1

這應該工作（或它的變體）。

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

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

Answer 2

我覺得有必要告訴你，只使用一個類，您單擊處理

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

沒有必要爲ID的，如果你不使用它們。

Answer 3

如果我讀你的代碼，你正在做正確的是使用該對話框類的所有元素的

$('.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. 

，我應該懷疑做的伎倆