弹出窗口未正确显示

Question

我正在尝试在此表中存在的 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>

Answer 1

您只需要一个方法来从所有弹出文本元素中删除显示类，然后再打开新的。您还可以通过使用一个函数并将要触发的弹出窗口的参数传递给它来消除对每个弹出元素使用单个函数的需要。

请在 StackOverflow 中查看此答案：

How to make only 1 popup open at a time?

这里是你的答案

Answer 2

Try this,

$(window).ready(function () {
        $(document).on('click','.popup',function () {
            var popup = $(this).closest('.popuptext');
            popup.show();
        });
    });

ID 不是必需的。尝试通过类访问它。