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

【问题标题】：Triggering multiple popups generated by loop触发循环生成的多个弹出窗口
【发布时间】：2020-03-03 21:22:49
【问题描述】：

我想在从数据库中获取记录的循环中显示一条警报消息。问题是，弹出窗口仅适用于一项，而另一项不显示弹出窗口。

怎么了？

PHP：

$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

   }
}

JavaScript：

var stile = "top=10, left=10, width=450, height=350,
             status=no, menubar=no, toolbar=no scrollbars=no";

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

CSS：

.item {
  width: 100px;
  text-align: center;
  display: block;
  background-color: transparent;
  border: 1px solid transparent;
  margin-right: 10px;
  margin-bottom: 1px;
  float: left;
}

#index-gallery {
  width: 50px;
}


/* Popup container */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


/* The actual popup (appears on top) */

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}


/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class when clicking on the popup container (hide and show the popup) */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

【问题讨论】：

循环在哪里？
我已经更新了问题
元素不能有重复的 ID 属性。相反，您应该为元素分配一个popup class，并使用此类而不是 ID 来切换它们。
我还注意到您的第一个查询包含LIMIT 1，因此while 循环不会重复多次。

标签： javascript html

【解决方案1】：

HTML must be unique 中的ID 指向文档，这意味着您不能在循环中重复它。我建议改用class，这样可以重复。

您需要弹出与单击的任何元素相关联（嵌套在内部）的元素。我向每个.popop 推荐adding an event listener，它会在点击时触发一个处理函数。该函数应该使用querySelector 在被点击的元素中找到弹出文本并切换其“显示”类。

这是一个基本的例子：

// define a function to show a popup's popuptext.
function popItUp() {
  this.querySelector('.popuptext').classList.toggle("show");
}

// define all popup elements.
let popups = document.querySelectorAll('.popup');

// add listener to each popup element, which binds handler function to click event.
popups.forEach(
  popup => popup.addEventListener('click', popItUp)
);

/*
// The arrow function above is equivalent to:
popups.forEach(function(popup){
  popup.addEventListener('click', popItUp);
});
*/

.item {
  width: 100px;
  text-align: center;
  display: block;
  background-color: transparent;
  border: 1px solid transparent;
  margin: 80px 0 0 50px;
  float: left;
}

.popup {
  position: relative;
  cursor: pointer;
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popuptext.show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="item">
  <div class="popup">
    <span class="popuptext">Popup Message 1</span>
    <p>Currently Booked</p>
  </div>
</div>

<div class="item">
  <div class="popup">
    <span class="popuptext">Popup Message 2</span>
    <p>Currently Booked</p>
  </div>
</div>

<div class="item">
  <div class="popup">
    <span class="popuptext">Popup Message 3</span>
    <p>Currently Booked</p>
  </div>
</div>

CSS 可能存在其他一些布局问题，但这可能会让您对 JavaScript 实现有所了解。

供参考：

id 全局属性定义了一个标识符 (ID)，该标识符在整个文档中必须是唯一的。

Document 方法querySelectorAll() 返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。

EventTarget 方法addEventListener() 设置了一个函数，该函数将在指定事件传递到目标时调用。

Element 接口的querySelector() 方法返回第一个元素，该元素是调用它的元素的后代，它与指定的选择器组匹配。

顺便说一句，我还注意到您的查询包含LIMIT 1，因此while 循环不会重复多次。您可能想要删除（或增加）该限制：

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

【讨论】：

【解决方案2】：

在 HTML 中，id 属性被设计为在文档中是唯一的。 document.getElementById() 将始终只返回一个元素。

解决问题的一种方法是给每个弹出窗口一个唯一的id，并将这个id 传递给myFunction()，这样它就知道要显示哪个弹出窗口（我已经删除了所有中间行代码为简洁起见）。

我假设您的数据库记录具有一些唯一标识符以及 name、dates、price、discount 和 column，但由于您尚未在当前代码中选择它，我不知道当然。如果没有，另一种方法是自己跟踪唯一计数器，例如 $id 此处：

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

然后您可以将 $id 值发送到您的函数和弹出窗口 id 属性，以帮助 Javascript 找出您想要的内容：

<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");
}

【讨论】：