Javascript 触发循环生成的多个弹出窗口

我想在从数据库获取记录的循环中显示一条警报消息。问题是，弹出窗口只对一个项目有效，而另一个项目没有显示弹出窗口

怎么了

PHP:

CSS:

.item{
宽度：100px；
文本对齐：居中；
显示：块；
背景色：透明；
边框：1px实心透明；
右边距：10px；
边缘底部：1px；
浮动：左；
}
#索引库{
宽度：50px；
}
/*弹出式容器*/
.弹出窗口{
位置：相对位置；
显示：内联块；
光标：指针；
}
/*实际弹出窗口（显示在顶部）*/
.popup.popuptext{
可见性：隐藏；
宽度：160px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：8px0；
位置：绝对位置；
z指数：1；
底部：125%；
左：50%；
左边距：-80px；
}
/*弹出箭头*/
.popup.popuptext:：after{
内容：“；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：#555透明；
}
/*单击弹出窗口容器时切换此类（隐藏并显示弹出窗口）*/
.popup.show{
能见度：可见；
-网络工具包动画：Fadein1s；
动画：Fadein1s
}
/*添加动画（在弹出窗口中淡入淡出）*/
@-webkit关键帧fadeIn{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

在HTML中添加到文档中，这意味着您不能在循环中重复它。我建议改用a，这样可以重复

您需要弹出与单击的元素相关联的元素（嵌套在其中）。我向每个单击后将触发处理程序函数的

.popop

推荐。函数应该通过使用并切换其“show”类来查找单击元素中的弹出文本

下面是一个基本示例：

//定义一个函数来显示弹出窗口的弹出文本。
函数popItUp（）{
这个.querySelector（'.popuptext'）.classList.toggle（“show”）；
}
//定义所有弹出窗口元素。
让popups=document.querySelectorAll（'.popup'）；
//将侦听器添加到每个弹出元素中，该元素将处理程序函数绑定到click事件。
弹出窗口。forEach(
popup=>popup.addEventListener（'click'，popItUp）
);
/*
//上述箭头功能相当于：
forEach（函数（弹出窗口）{
popup.addEventListener（'click'，popItUp）；
});
*/

.item{
宽度：100px；
文本对齐：居中；
显示：块；
背景色：透明；
边框：1px实心透明；
利润率：80px050px；
浮动：左；
}
.弹出窗口{
位置：相对位置；
光标：指针；
}
.popup.popuptext{
可见性：隐藏；
宽度：160px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：8px0；
位置：绝对位置；
z指数：1；
底部：125%；
左：50%；
左边距：-80px；
}
.popup.popuptext:：after{
内容：“；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：#555透明；
}
.popuptext.show{
能见度：可见；
-网络工具包动画：Fadein1s；
动画：Fadein1s
}
@-webkit关键帧fadeIn{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

弹出消息1
当前预订

弹出消息2
当前预订

弹出消息3
当前预订

在HTML中添加到文档中，这意味着您不能在循环中重复它。我建议改用a，这样可以重复

您需要弹出与单击的元素相关联的元素（嵌套在其中）。我向每个单击后将触发处理程序函数的

.popop

推荐。函数应该通过使用并切换其“show”类来查找单击元素中的弹出文本

下面是一个基本示例：

//定义一个函数来显示弹出窗口的弹出文本。
函数popItUp（）{
这个.querySelector（'.popuptext'）.classList.toggle（“show”）；
}
//定义所有弹出窗口元素。
让popups=document.querySelectorAll（'.popup'）；
//将侦听器添加到每个弹出元素中，该元素将处理程序函数绑定到click事件。
弹出窗口。forEach(
popup=>popup.addEventListener（'click'，popItUp）
);
/*
//上述箭头功能相当于：
forEach（函数（弹出窗口）{
popup.addEventListener（'click'，popItUp）；
});
*/

.item{
宽度：100px；
文本对齐：居中；
显示：块；
背景色：透明；
边框：1px实心透明；
利润率：80px050px；
浮动：左；
}
.弹出窗口{
位置：相对位置；
光标：指针；
}
.popup.popuptext{
可见性：隐藏；
宽度：160px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：8px0；
位置：绝对位置；
z指数：1；
底部：125%；
左：50%；
左边距：-80px；
}
.popup.popuptext:：after{
内容：“；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：#555透明；
}
.popuptext.show{
能见度：可见；
-网络工具包动画：Fadein1s；
动画：Fadein1s
}
@-webkit关键帧fadeIn{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

弹出消息1
当前预订

弹出消息2
当前预订

弹出消息3
当前预订

在HTML中，

id

属性在文档中是唯一的<代码>文档。getElementById（）将始终只返回一个元素

解决问题的一个方法是给每个pop

$query = "SELECT * FROM discount
          WHERE consecutivedays <=  DATEDIFF('$date2','$date1')
                AND idbeach = '$idbeach'
          ORDER BY consecutivedays desc
          LIMIT 1";

$results = mysqli_query($conn, $query);

while($row = $results->fetch_assoc()){

    $reserved= $row['discountperc'];

    if ($reserved=="yes") {

        $getbooking = new WA_MySQLi_RS("getbooking",$sis,1);

        $getbooking->setQuery("SELECT `name`,
                                      CONCAT(`datein`,' - ',`dateout`) AS dates,
                                      price,discount,comment
                               FROM booking
                               where idseatbeach = '$idseatbeach'
                               order by datein limit 1");

        $getbooking->execute();
        $name=$getbooking->getColumnVal("name");
        $dates=$getbooking->getColumnVal("dates");
        $price=$getbooking->getColumnVal("price");  
        $discount=$getbooking->getColumnVal("discount");    
        $comment=$getbooking->getColumnVal("comment");  
        $message = "Booked by: $name\n
                    Date range: $dates\n
                    Price :$price\n
                    Discount :$discount\n
                    Comment :$comment";

        ?>
        <div class="item" >
            <div class="popup" onclick="myFunction()">
                <span class="popuptext" id="myPopup"><?php echo $message;?></span>
                <img src="images/umbrelladisactive.png" width="35" height="35" 
                    alt="<?php echo $nameseat; ?> "/>
                <p style="margin-right: 0px; color: blue;">Currently Booked</p>
            </div>
        </div>
       <?php

   }
}

$id = 0;
while($row = $results->fetch_assoc()){
    $id++;

<div class="popup" onclick="myFunction('myPopup<?php echo $id; ?>')">
    <span class="popuptext" id="myPopup<?php echo $id; ?>"><?php echo $message;?></span>

function myFunction(elementId) {
    var popup = document.getElementById(elementId);
    popup.classList.toggle("show");
}