想要爲每個數據庫ID使用foreach使用jquery對話框

Question

我想爲每個數據庫行使用JQuery對話框。

我的問題是，當我想點擊一些東西。所有對話框將打開，每個ID爲Image。我希望點擊時只顯示特定的ID。 我從來沒有真正與JQuery合作過，我搜索了很多，但我只是想出瞭如何解決這個問題。

我的代碼：

查詢。

<?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 
} 


?> 

對於腳本每個循環中

   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>  

試驗 - 格

<?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

問題就在這裏：

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

在這裏，您將選擇以test-開頭的所有div's，並初始化其對話框。而不是這樣做，通過給它們提供一個唯一的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

使用在每格但相同的類名ID將有所不同： - 在你的闕ID將MaasduinId

<?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>