Question

我正在创建一个评论 - 回复功能，当用户按下“回复”按钮时，我希望回复表单显示在其父级下。

现在我的代码使表单显示在每个评论下，而不仅仅是特定的“父 - 评论 - 回复 - 按钮”。如何避免其他评论中的表格？

我的代码如下所示：

HTML

    <head>
        <?php
        include ('headCont.php');?>
    </head>
    <body>

        <?php
        include('navBar.php');?>

        <div class="container">

            <div class="row">
                <div class="box">
                     <div>
                        <!------------container------->
                        <form action="" method ="POST">
                            Namn: <br>
                            <input type="text" name ="name"><br>
                            Kommentar: <br>
                            <textarea name="comment" placeholder="Ställ en fråga" rows="10" cols="20"></textarea><br>
                            <input type ="submit" name ="submit" value="Skicka"> 
                        </form><br>
                    </div>
                    <div>
                        <?php 

                        include ('commentBox/storeComments.php');
                        include ('commentBox/getComments.php');?>

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

        </div>
        <!-- /.container -->

        <footer>
            <?php
            include ('footer.php');
            ?>
        </footer>

        <!-- jQuery -->
        <script src="jsOld/jquery.js"></script>
    </body>
</html>

    <script>
        $(document).ready(function(){
        $("#show").click(function(){
            $(".reply-form").show();
        });
        $("#hide").click(function(){
            $(".reply-form").hide();
        });
    });

</script>

getComments

    <?php
include ('connectDB.php');
if($connect){
    mysqli_select_db($connect, "comments");
    $query2 = "SELECT * FROM data ORDER BY `id` DESC";
    $result = mysqli_query($connect, $query2);

    $comments = array();

    while($row = mysqli_fetch_array($result)){
        $name = $row['name'];
        $comment = $row['comment'];
        $date = $row['date'];

        echo "
                    <div style='width:60%' class='col-lg-12'>
                        <div class='panel panel-default'>
                            <div class='panel-heading'>
                                <strong> $name </strong><span style='float:right'class='text-muted'>$date</span>
                            </div>
                            <div class='panel-body'>$comment
                                <button id='show' style='float:right'>Reply</button>
                            </div>
                        </div><!-- /panel panel-default -->
                    </div><!-- /col-sm-5 -->";

        echo "      <div class='col-lg-12 padd'>
                    <form method='POST' action='' class='reply-form'>
                        Namn:<br>
                            <input name='_method' type='text'</input><br>
                            Kommentar:<br>
                            <textarea name='reply_comment' cols='50' rows='10'></textarea>
                            <div class='button-group'>
                                <input type='submit' name='submit_reply' value='Skicka'></input>
                                <button id='hide' type='submit' name='close' value='Stäng'>Stäng</input>
                            </div>
                    </form>  
                </div>";
    }
}
?>

输出

Answer 1

您需要在父DOM中创建表单。这意味着，以下内容应该在您的send echo语句的末尾。最初应使用css隐藏.reply-form。

</div><!-- /col-sm-5 -->";

Answer 2

HTML ID显示和隐藏可以在DOM中多次出现，请记住HTML ID应该是唯一的。所以最好把它改成类。

现在回答您的问题，您可以尝试添加一个计数器，这基本上将表单连接到show按钮，例如：

 <button id='show' style='float:right' data-counter="0">Reply</button>

 <form method='POST' action='' class='reply-form reply-form-0'>

$("#show").click(function(){
        var counter = $(this).data("counter");
        $(".reply-form-"+counter).show();
    });

如何才能使表单仅显示在其父级下？

2 个答案: