Question

我在jquery中遇到了Dialogs的问题，我有一个查询，在循环中将最多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>';

                }

修改现在每个单个对话框都会打开...

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应该在页面上是唯一的

多个对话框

2 个答案: