Question

我有一个带有数据库的站点。我成功创建了一个HTML表，其中包含数据库中的内容。现在，我希望表中的每个元素都是锚，并使用我单击的元素在数据库中打开一个模态信息。

它起作用了，唯一的问题是无论单击哪个元素，只有第一个模态会打开。如果单击第三个元素，它将在第一个元素上显示信息。

在图像中，我单击Mike，它向我显示William Soares（第一）

<div class="col-sm-4"><div class="table-responsive" style="margin: 1%">
                <h3 style="color: white; font-weight: bold; font-style:italic;">Defesas</h3>
                <table class="table table-dark">
                     <thead>
                        <tr>
                          <th>Numero</th>
                          <th>Nome</th>
                        </tr>
                      </thead>
                      <tbody>

            <?php 
                    $sql = 'SELECT * FROM jogadores ORDER BY id ASC LIMIT 32';
                    $stmt = $dbh->prepare( $sql );
                    $stmt->execute();

                    if( $stmt && $stmt->rowCount() > 0)
                    {   
                    while( $obj = $stmt->fetchObject() )
                    {       if ($obj->posicao == "Defesa") {

            ?>
                        <tr>
                          <th><?php echo $obj->numero_camisola ?></th>
                          <td><a href="#modalJog" data-target="#modalJog" data-toggle="modal">
                            <?php echo $obj->nome ?></a>

                            <div id="modalJog" class="modal fade" role="dialog" >
                                <div class="modal-dialog">
                                    <div class="modal-content" style="background-color: black;">
                                        <div class="modal-header">
                                            <h5 class="modal-title"><?php echo $obj ->nome ?></h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <div class="modal-body">
                                            <p><?php echo $obj ->nomeCompleto?></p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                              </div>
                          </td>
                        </tr>

                      </tbody>
            <?php 

                }   
            }
        }
                else
                    echo 'Não existem jogos disponíveis.';
            ?>  


                </table>
            </div></div>
</div>

https://ibb.co/r0DbwnF https://ibb.co/tcQpNWy

Answer 1

您正在告诉您的链接从具有特定ID的元素中打开模式。 data-target="#modalJog"就是这样做的。然后，您将在循环中执行相同的代码，从而为每个容器赋予相同的ID。 HTML元素应具有唯一的ID（或完全没有）。否则，将仅识别具有重复ID的第一个元素。

我不知道您的数据库表是否有一些唯一的ID列（希望如此），但是如果有，您可以使用它来使元素ID唯一。例如，您将执行类似data-target="#modalJog<?php echo $obj->id; ?>"和<div id="modalJog<?php echo $obj->id; ?>"的操作。

如果表中没有ID列，请将该ID保留在容器div之外，并在链接上使用data-target="a:focus+div"。相对于任何具有焦点的div元素（将被单击的元素），这将定位DOM中的下一个同级a元素。

多个Bootstrap模式，仅第一个打开

1 个答案: