javascript - 如何为php从数据库中选择添加SLIDE DOWN/SLIDE UP功能？

Question

一直在尝试将 SLIDE UP/SLIDE DOWN 函数添加到表中的 PHP SELECT 中，但不幸的是，我似乎缺少一些东西。

我的代码已经有一个向上/向下滑动的函数init，它涉及到文本区域和提交按钮。现在我需要对问题和答案行使用相同的功能。其中问题由表 1 调用，答案由表 2 调用。

我会将问题作为链接，这样当我们单击它时，表 2 中的答案列表就会向下滑动。

我的代码如下::

<div class="name">

                            <?php 
                            $sql = "SELECT * FROM input ORDER BY date DESC";
                            $result = $conn->query($sql);

                            if ($result->num_rows > 0) { 
                            $index = 0; 
                            while($row = $result->fetch_assoc()) { 
                              $index++; 
                            $myid = $row["id"] ;
                            $sql2 = "SELECT * FROM output WHERE question_id = $myid ORDER BY date DESC";

                            $result2 = $conn->query($sql2);


                            ?>

    <div id="q">
        <B><big><font color= #ba4a00> Q:</font></big><a class="About" href="#" class="question" id="question_'.$index.'"> <?php echo $row["question"]; ?></a> </B>

                    <?php 
                            echo '<button class="add" id="add_'.$index.'"><B>Add Answer</B></button>';
                            echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php">'; // I dont think openning form from row to row would be nice!
                            echo '<input type="hidden" name="questionid" value="'. $row['id'].'"/>';
                            echo '<textarea  type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your answer here.."  ></textarea>';
                            echo '<button onClick="addsubmit('.$index.');" type="submit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>';
                            echo '</form>';
                        ?>
        <small><p><?php echo $row["date"]; ?></p></small>

        <?php 

            if ($result2->num_rows > 0) {
            while($row2 = $result2->fetch_assoc()) {
        ?>
        <div name="answ" id="answ_'.$index.'">
        <B><big><font color= #ba4a00> A:</font></B></big> <small><?php echo $row2["answer"]; ?></small></br>
        </div>


        <?php 
                }
            } else {
                    echo "No Answers Yet";
                        }


        ?>

    </div>
    <?php     }
                 } else {
                    echo "0 results";
                        }
                    $conn->close();
    ?>
</div>

<script type='text/javascript'>
$(document).ready(function() {
        $('.question').click(function(e) {
                e.stopPropagation();
            e.preventDefault();
            $(this).parent().find('answ').slideDown('slow');
        });


        $(window).click(function(e) {
            console.log( $(e.target) );
            if( !$(e.target).is('answ') ){
            $('answ').slideUp();
          } 

        });
    });

</script>

<script type='text/javascript'>
$(document).ready(function() {
        $('.add').click(function(e) {
                e.stopPropagation();
            e.preventDefault();
            $(this).parent().find('form').slideDown('slow');
            $(this).parent().find('form textarea.addtext').focus();
            $(this).hide();
        });

        $('form').click(function(e){
            e.stopPropagation();
        });

        $(window).click(function(e) {
            console.log( $(e.target) );
            if( !$(e.target).is('form') ){
            $('.add').show();
            $('form').slideUp();
          } 

        });
    });

</script>

我希望代码清晰易懂。任何建议表示赞赏..

Answer 1

使用 PHP，您可以在 jquery 上动态进行选择，仅当您为其编写委托(delegate)函数时，该选择才适用于动态元素。

像这样编写你的函数，它将在元素上运行

$(document).on('click', '.question', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).parent().find('answ').slideDown('slow');
});