Question

我正在尝试建立一个论坛，并且有人在单击“答复”按钮时打开了引导模式，但是该按钮在while循环中，而模式仅在行中的第一个按钮上打开。

这是while循环

$sql = $conn->prepare("SELECT * FROM forum_answers WHERE topicId = :id");
                $sql->bindValue(":id", $id);
                $sql->execute();
                while($row = $sql->fetch(PDO::FETCH_ASSOC))
                {
                    if($row['quote'] == "")
                    {
                        ?>
                        <div class="card">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-md-6">
                                        <b><?php echo $row['uid']; ?></b>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <?php echo $row['date']; ?>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="card-text"><?php echo $row['answer']; ?></p>
                                <a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
                            </div>
                        </div>
                        <?php
                    }
                    else
                    {
                        ?>
                        <div class="card">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-md-6">
                                        <b><?php echo $row['uid']; ?></b>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <?php echo $row['date']; ?>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                            <blockquote class="blockquote" style="background-color: #F8F8F8;"><?php echo $row['quote']; ?></blockquote>
                                <p class="card-text"><?php echo $row['answer']; ?></p>
                                <a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
                            </div>
                        </div>
                        <?php
                    }
                }

这是一个模态。

<div class="modal fade" id="addReply" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Add Reply</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Quote</label>
                        <?php
                            $sql = $conn->prepare("SELECT answer FROM forum_answers WHERE id=:id");
                            $sql->bindValue(":id", $id);
                            $sql->execute();
                            while($row = $sql->fetch(PDO::FETCH_ASSOC))
                            {
                                ?>
                                <textarea class="form-control rounded-0" name="quote" id="exampleFormControlTextarea1" rows="4" disabled><?php echo $row['answer']; ?></textarea>
                                <?php
                            }
                            ?>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Answer</label>
                        <textarea class="form-control" id="desc1" cols="40" rows="3" name="answer" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" name="submit3" value="Reply">
                </div>
            </form>
        </div>

    </div>
</div>

<script>
    $(document).ready(function() {
        $("#btnAddReply").click(function() {
            $("#addReply").modal();
        });
    });
</script>

我不知道如何在引导程序中使用类代替id，我对javascript不太了解。

Answer 1

如果您有多个具有相同名称的ID，则默认情况下，请选择您的案例中的js on click事件触发时具有名称的第一个ID。

您可以使用类似jQuery的运算符在名称为btnAddReply的所有ID的点击事件中触发

   <script>
        $(document).ready(function() {
            $("[id^=btnAddReply]").click(function() {
                $("#addReply").modal();
            });
        });
    </script>

，但是一个干净，更好的解决方案是使用通用类。而不是HTML中的id，为类命名为btnAddReply

<script>
    $(document).ready(function() {
        $(".btnAddReply").click(function() {
            $("#addReply").modal();
        });
    });
</script>

在while循环中，只有打开引导程序模型的第一个按钮有效

1 个答案: