我正在嘗試在此表中的 1 上創建一個彈出視窗。我想要不同的 1 個值的不同彈出視窗（資料可能相同）。但是現在發生了什么，如果我點擊任何 1，它只會打開第一個 1 的彈出視窗。它的發生是因為id每個跨度的 都是相同的。但是，如果我更改 span id 并嘗試創建另一個函式，則彈出功能將不起作用。
有人可以給我建議一種方法，通過它我可以使用 jquery 或 html,css 來實作這一點。我在谷歌上搜索了很多，但找不到相關的東西。而且，我在 ASP.net 中做這件事
<style>
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.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 - 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 ;}
}
</style>
桌子：
<table border="1">
<tr style= "background-color: #eee;">
<th scope="col" style="width: 90px">Date</th>
<th scope="col">09:00</th>
<th scope="col">09:30</th>
<th scope="col">10:00</th>
<th scope="col">10:30</th>
<th scope="col">11:00</th>
<th scope="col">11:30</th>
<th scope="col">12:00</th>
<th scope="col">12:30</th>
<th scope="col">13:00</th>
<th scope="col">13:30</th>
<th scope="col">14:00</th>
<th scope="col">14:30</th>
<th scope="col">15:00</th>
<th scope="col">15:30</th>
<th scope="col">16:00</th>
<th scope="col">16:30</th>
<th scope="col">17:00</th>
<th scope="col">17:30</th>
<th scope="col">18:00</th>
</tr>
<tr>
<td>26-11-2021</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>
<div class="popup" onclick="myFunction()">1
<span class="popuptext" id="myPopup">
Customer name : Neeraj
Customer Number : 1234567890
Contact Date & Time : 11/25/2021 14:04
Agent Name
</span>
</div>
</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>26-11-2021</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>
<div class="popup" onclick="myFunction()">1
<span class="popuptext" id="myPopup">
Customer name : Neeraj
Customer Number : 1234567890
Contact Date & Time : 11/25/2021 14:04
Agent Name
</span>
</div>
</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>26-11-2021</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>
<div class="popup" onclick="myFunction()">1
<span class="popuptext" id="myPopup">
Customer name : Neeraj
Customer Number : 1234567890
Contact Date & Time : 11/25/2021 14:04
Agent Name
</span>
</div>
</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
uj5u.com熱心網友回復：
在打開新元素之前，您只需要一種方法來從所有彈出文本元素中洗掉顯示類。您還可以通過使用一個函式并將引數傳遞給它來觸發彈出視窗，從而消除為每個彈出元素設定一個函式的需要。
請在 StackOverflow 中查看此答案：
如何一次只打開1個彈出視窗？
這是您的答案的答案
uj5u.com熱心網友回復：
Try this,
$(window).ready(function () {
$(document).on('click','.popup',function () {
var popup = $(this).closest('.popuptext');
popup.show();
});
});
身份證不是必須的。嘗試通過類訪問它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366027.html
標籤：javascript html 查询 css