多個對話框

Question

我遇到了jquery中對話框的問題，我有一個查詢可以將循環中的4項數據放入div中。我想通過一個對話框讓每行可用於獲取更多信息。

頭TAG：

<link rel="stylesheet" 
href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>  


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

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

PHP：

foreach($veh as $v){ 
     echo '<div class="block">'; 

     $sql = "SELECT * FROM table"; 
      $result = $dbh->query($sql); 
      $row = $result->fetchall(PDO::FETCH_ASSOC); 


    foreach($row as $r){    

     echo '<div class="effect6">'.strtoupper($r['col_name']).'</div>'; 
     echo '<div id="dialog" title="'.$r['eas_no'].'">Text</div>'; 
     echo '<button id="opener">Open</button>'; 
          } 

       echo '</div>'; 

       } 

編輯 每一個對話框現在打開......

Answer 1

試着改變你的代碼如下：

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

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

和

$tmp = 0; 
foreach($row as $r) {    

    echo '<div class="effect6">'.strtoupper($r['col_name']).'</div>'; 
    echo '<div class="dialogDiv'.$tmp.' dialog" title="'.$r['eas_no'].'">Text</div>'; 
    echo '<button class="opener" id="'.$tmp.'">Open</button>'; 
    $tmp++;  
    } 

Answer 2

您正在多件事情使用相同的ID（dialog和opener）。 ID應該是唯一的頁面上