foreachを使用してすべてのデータベースIDに対してJqueryダイアログを使用したい

Question

すべてのデータベース行に対してJQueryダイアログが必要です。

私の問題は、何かをクリックしたいときです。 ID Imageごとにすべてのダイアログが開きます。クリックすると特定のIDだけが表示されます。 私はJQueryで実際に作業したことはありませんが、私は多くを検索しましたが、私はこの問題をどのように修正できるか考えていません。

マイコード：

クエリ。

   foreach($hotels as $key => $hotel) 
       { 
        ?> 
        <?php if ($hotel['MaasduinCategory'] == 'Appartementen'): ?> 

          <div class="products-<?php echo $hotel['MaasduinId'];?>"> 
           <div class="maasduin-foto"><img style="width: 136px; height: 134px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinImage']; ?>"> 
            <?php if ($hotel['MaasduinPas'] == '1'): ?> 
             <div class="maasduin-actiefoto"> 
              <img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinPasfoto']; ?>"> 
             </div> 
            <?php endif ?> 
           </div> 
           <div class="maasduin-naam"><?php echo 
           $hotel['MaasduinNaam']; ?></h3></div> 
           <div class="maasduin-locatie"><?php echo 
           $hotel['MaasduinLocatie']; ?></div> 
           <div class="maasduin-email"><?php echo 
            $hotel['MaasduinEmail']; ?></div> 
           <div class="maasduin-telefoon"><?php echo 
            $hotel['MaasduinTelefoon']; ?></div> 
           <div class="maasduin-website"><?php echo 
            $hotel['MaasduinWebsite']; ?></div> 
        <script> 
          var $dialog; 
          $(document).ready(function() { 
           $dialog = $("div[class^='test-']") 

           .dialog({ 
            autoOpen: false, 
            title: '<?php echo 
            $hotel['MaasduinNaam']; ?>' 
           }); 

           $("div[class^='products-']").click(function() { 
            $dialog.dialog('open'); 
            return false; ////cancel eventbubbeling 
           }); 
          }); 

          function showDialog() { 
           $dialog.dialog('open'); 
           return false //cancel eventbubbeling 
          } 

        </script>  

試験 - divの

<?php foreach($hotels as $key => $hotel) 
       { 
        ?> 
           <div class="test-<?php echo 
            $hotel['MaasduinId'];?>"> 
            <div class="maasduin-naam"><?php echo 
             $hotel['MaasduinNaam']; ?></h3></div> 
           </div> 

      <?php } ?> 

Answer 1

問題内側スクリプトを使用して、各ループの

<?php 
    include ('functions/function.php'); 
    $connect = connectToDB(); 

$query = "SELECT `MaasduinId`, `MaasduinImage`, `MaasduinNaam`, 
`MaasduinLocatie`, `MaasduinTelefoon`, `MaasduinEmail`, `MaasduinWebsite`, 
`MaasduinWelkom`, `MaasduinArrangement`,`MaasduinPasfoto` ,`MaasduinPas`, 
`MaasduinCategory` FROM `maasduinen` WHERE 1=1"; 

$resource = mysqli_query($connect, $query); 

$hotels = array(); 

while($result = mysqli_fetch_assoc($resource)) 
{ 
$hotels[] = $result; // all your games are now in array $games 
} 


?> 

はここにある：

$dialog = $("div[class^='test-']") 

ここでは、クラス名にtest-で始まるdiv'sをすべて選択し、ダイアログを初期化します。これを行うのではなく、特定のdivをユニークなidとして指定し、そのダイアログの初期化コードをidに置きます。以下のような：使用同じクラスのすべてのdiv要素内の名前ですが、id

<div class="click_div" id="<?php echo 
    $hotel['MaasduinId'];?>"><?php echo 
    $hotel['MaasduinNaam']; ?></h3> 
</div> 

$(".click_div").on("click",function(e){ 
    // $(this).attr('id') will return the id 
    $dialog = $(this).attr('id'); 
    $dialog.dialog('open'); 
}); 

Answer 2

は異なるされます： - あなたのQUEのIDでちょうど先端

<?php foreach($hotels as $key => $hotel) 
       { 
        ?> 

            <div class="click_div" id="<?php echo 
            $hotel['MaasduinId'];?>"><?php echo 
             $hotel['MaasduinNaam']; ?></h3></div> 


      <?php } ?> 



<script> 
$(".click_div").on("click",function(e){ 
    alert($(this).attr('id')); 

}); 
</script>