0

jquery のダイアログに問題があります。最大 4 つのデータ項目をループで div に入れるクエリがあります。ダイアログボックスを介して詳細情報を表示できるように、各行を表示したいと考えています。

HEAD タグ内:

<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>';

                }

EDIT Every Single ダイアログボックスが開きます...

4

2 に答える 2

2

コードを次のように変更してみてください。

<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++;    
   }
于 2013-04-04T09:11:34.377 に答える