Я перебираю базу данных, но моя модель div работает только для первой записи, а не для других

Question

Я нашел модель в школах w3, которая соответствует моим потребностям, но когда я oop через мою базу данных, модель работает только с первым результатом, это, вероятно, 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>

JS:

<script>
// Get the modal
var modal = document.getElementById("updateModel");

// Get the button that opens the modal
var btn = document.getElementById("openModel");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

CSS:

/* 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}
}

Answer 1

Как уже говорили другие, вы должны использовать разные идентификаторы для каждого элемента. Вот почему это работает только с последним элементом.

Кроме того, вы получаете только один elementById ОДИН РАЗ. Таким образом, код JS будет работать только с одним элементом.

Кроме того, переменная span - это только первая буква "X" в документе. Другие «X» не будут иметь событий onClick.

Я сделал всю работу за вас, но это довольно простой подход. Это не лучшее решение, но самое быстрое, о котором я подумал. Мне не нравится часть window.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>

JS

<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>

---

Примечание : я не использовал CSS часть, поэтому я не знаю, нужно ли это тоже исправить.