如何为php选择数据库添加SLIDE DOWN/SLIDE UP功能


How to add SLIDE DOWN/SLIDE UP function for php selects from database?

一直在尝试添加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="answerswer_'.$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="answersw" id="answersw_'.$index.'">
        <B><big><font color= #ba4a00> A:</font></B></big> <small><?php echo $row2["answerswer"]; ?></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>

我希望代码清楚易懂。

使用PHP,您可以动态地在jquery上进行选择,只有当您为它编写委托函数时,它才能在动态元素上工作。

像这样编写你的函数,它将在

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