[英]Triggering multiple popups generated by loop
我想在從數據庫中獲取記錄的循環中顯示一條警報消息。 問題是,彈出窗口僅適用於一項,而另一項不顯示彈出窗口。
怎么了?
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;
}
}
HTML 中的ID對於文檔必須是唯一的,這意味着您不能在循環中重復它。 我建議改用一個類,這樣它就可以重復。
您需要彈出與(嵌套在內部)單擊的任何元素相關聯的元素。 我建議為每個.popop
添加一個事件監聽器,它會在點擊時觸發一個處理函數。 該函數應該通過使用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;";
在 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");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.