Javascript I’；我在数据库中循环，但我的div模型只对第一条记录有效，而对其他记录无效

我在w3学校找到了一个适合我需要的模型，但当我在数据库中循环时，该模型只对第一个结果有效，可能是javascript，但我对js非常缺乏经验。有人能给我一些指点吗

我的项目由下面的HTML组成，只是其中的很多。 HTML/PHP：

<table>
    <?php foreach ($results as $value): ?>
        <tr>
            <td>
                <div id="openModel">open the model</div>
                    <!-- The Modal -->
                    <div id="updateModel" class="modal">

                    <!-- Modal content -->
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="close">&times;</span>
                        </div>
                        <div class="modal-body">
                            <p><?php echo $value["col1"]; ?></p>
                            <p><?php echo $value["col2"]; ?></p>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    <?php endforeach; ?>
</table>

---

正如其他人所说，您必须为每个元素使用不同的ID。这就是为什么这只适用于最后一个元素

此外，您一次只能获得一个elementById。因此，JS代码只能使用一个元素

另外，

span

变量只是文档上的第一个“X”。其他“X”将没有onClick事件

我已经为您完成了这项工作，但这是一个非常简单的方法这不是最好的解决方案，但却是我想到的最快的解决方案。我不喜欢

窗口。单击
部分，尤其是条件部分，但是，嘿，它可以工作

HTML/PHP

<table>
    <?php foreach ($results as $key => $value): ?>
        <tr>
            <td>
                <div><span id="openModal-<?= $key ?>" class="openModal" onclick="openModal('updateModal<?= $key ?>')">open the modal</span></div>
                    <!-- The Modal -->
                    <div id="updateModal<?= $key ?>" class="modal">

                    <!-- Modal content -->
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="close" onclick="closeModal('updateModal<?= $key ?>')">&times;</span>
                        </div>
                        <div class="modal-body">
                            <p><?php echo $value["col1"]; ?></p>
                            <p><?php echo $value["col2"]; ?></p>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    <?php endforeach; ?>
</table>


每个id必须是唯一的。当您在循环中迭代时，每个模式都有相同的
openModel
和
updateModel
id。您需要为每个模式创建一个唯一的id。@aynber您能再帮点忙吗？js部分真的很混乱。我把我的代码放进了一个粘贴箱，我得到了一个无法关闭的坏模型，我所有的行都打开了相同的结果。现在，我们的模型可能命名正确，但您正在覆盖每个循环上的变量。您可能可以将id添加到变量名中，但这也意味着要创建大量重复代码。我正试图记住更简单的方法，我认为这涉及到
数据属性
，但我一时记不起来。太棒了，非常感谢。你知道我如何在mobile Safari上通过点击模型窗口的外部来关闭模型吗？@Benwhittaker25只要有可能，我喜欢使用vanilla JS，但是你为什么不使用一些模型库呢？它们有很多：，…我将更仔细地研究js，我一直打算下一步再研究它；特别是jquery，我在我的raspberry pi上经常看到它。
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #c4c4c4;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Header */
.modal-header {
    height: 40px;
    padding: 2px 16px;
    background-color: #6d6d6d;
    color: white;
}

/* Modal Body */
.modal-body {
    padding: 2px 16px;
}

/* Modal Footer */
.modal-footer {
    height: 40px;
    padding: 2px 16px;
    background-color: #6d6d6d;
    color: white;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
from {
top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}

<table>
    <?php foreach ($results as $key => $value): ?>
        <tr>
            <td>
                <div><span id="openModal-<?= $key ?>" class="openModal" onclick="openModal('updateModal<?= $key ?>')">open the modal</span></div>
                    <!-- The Modal -->
                    <div id="updateModal<?= $key ?>" class="modal">

                    <!-- Modal content -->
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="close" onclick="closeModal('updateModal<?= $key ?>')">&times;</span>
                        </div>
                        <div class="modal-body">
                            <p><?php echo $value["col1"]; ?></p>
                            <p><?php echo $value["col2"]; ?></p>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    <?php endforeach; ?>
</table>

<script>
function openModal(id) {
    console.log(id);
    var modal = document.getElementById(id);
    modal.style.display = "block";
}
function closeModal(id) {
    var modal = document.getElementById(id);
    modal.style.display = "none";
}

// This may be the worst part of the code.
window.onclick = function(event) {
    var modals = document.getElementsByClassName('modal');
    if (event.target.className.indexOf('close') == -1 && event.target.className.indexOf('openModal') == -1 && event.target.className.indexOf('modal') == -1) {
        for (var i = modals.length - 1; i > -1; i--) {
            modals[i].style.display = "none";
        }
    }
}
</script>