多个对话框 - Multiple Dialog Boxes

Multiple Dialog Boxes

本文关键字：对话框 | 更新日期: 2023-09-27

我在jquery对话框中遇到了一个问题，我有一个查询，将多达4项数据放入一个div中，在一个循环中。我想让每一行都可以通过对话框获得更多信息。

IN HEAD 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>';
                }

编辑

试着这样修改你的代码:

<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++;    
   }

您正在制作具有相同id (dialog和opener)的多个东西。Id在

页面上应该是唯一的