Question

谁能告诉我如何一次从数据库中检索记录。

我在这里附上我的代码：

让我解释一下代码。

数据库中有一个名为“ cquest”的表（其中包含一些问题），表名为“ question”，选项位于“ opt1，opt2，opt3，opt4”字段中。

下面的代码将表中存储的所有问题显示在屏幕上。

我的问题在这里：我想一一展示问题。就像我们单击下一步按钮一样，它将显示下一个问题，因此直到显示所有记录。

请帮助我了解实现它所应使用的主要逻辑。或者帮我编写脚本。

           $servername = "localhost";
           $username = "root";
           $password = "";
           $dbname = "quiz";
           $conn = new mysqli($servername, $username, $password, $dbname);
           if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
            }

           $sql = "SELECT * FROM cquest";
           $result = $conn->query($sql);
           if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
              echo "<div class='row'>";
                echo "<div class='col-md-6 mb-6'>";
                echo "<div class='card shadow border-0 h-100'>";
                echo "<div class='card-body'>";
                echo "<h5 class='dark-text'>".$row['question']."</h5>";
                echo "<div class='bg-light'>";
                echo "<code class='dark-text'>".$row['ccode']."</code>";
              echo "</div>";
                echo "<div class='custom-control custom-radio'>";
                      echo "<input type='radio' class='custom-control-input' id='defaultGroupExample1'  name='ans' value='a' checked>";
                      echo "<label class='custom-control-label' for=defaultGroupExample1>".$row["opt1"]."</label></br>";
                      echo "</div>";
                      echo "<div class='custom-control custom-radio'>";
                      echo "<input type='radio' class='custom-control-input' id='defaultGroupExample2'  name='ans' value='b'>";
                      echo "<label class='custom-control-label' for=defaultGroupExample2>".$row["opt2"]."</label></br>";
                      echo "</div>";
                      echo "<div class='custom-control custom-radio'>";
                      echo "<input type='radio' class='custom-control-input' id='defaultGroupExample3'  name='ans' value='c'>";
                      echo "<label class='custom-control-label' for=defaultGroupExample3>".$row["opt3"]."</label></br>";
                      echo "</div>";
                      echo "<div class='custom-control custom-radio'>";
                      echo "<input  type='radio' class='custom-control-input' id='defaultGroupExample4' name='ans' value='d'>";
                      echo "<label class='custom-control-label' for=defaultGroupExample4>".$row["opt4"]."</label></br>";
                      echo "</div>";
                      echo "<button name=submit class=next>NEXT</button>";
                      echo "</div>";
                      echo "</div>";
                      echo "</div>";
                      echo "</div>";

            }
            }
           }
           else {
            echo "Currently Unavailable";
           }
$conn->close();
?>```

Answer 1

一种方法是将所有问题放在页面上，并隐藏除第一个问题以外的所有问题，然后在单击下一步按钮时使用javascript / jQuery显示下一个问题。

在下面的代码中，我添加了所需的逻辑和javascript。

<?php

    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "quiz";
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    }

    $sql = "SELECT * FROM cquest";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        //set up a count to help track waht record we are up to. 0 = first record 
        $count = 0;
        while($row = $result->fetch_assoc()) {
        $style = ""; //set style to blank

        if($count > 0 ){ //if its not the first question, add styling to hide the question
            $style = " style='display:none;'";
        }

        echo "
            <div class='row question-container' ".$style.">"; // <-- Styling added to this line if it not the first question

        echo"   <div class='col-md-6 mb-6'>
                    <div class='card shadow border-0 h-100'>
                        <div class='card-body'>
                            <h5 class='dark-text'>".$row['question']."</h5>
                            <div class='bg-light'>
                                <code class='dark-text'>".$row['ccode']."</code>
                            </div>
                            <div class='custom-control custom-radio'>
                                <input type='radio' class='custom-control-input' id='defaultGroupExample1'  name='ans' value='a' checked>
                                <label class='custom-control-label' for=defaultGroupExample1>".$row["opt1"]."</label></br>
                            </div>
                            <div class='custom-control custom-radio'>
                                <input type='radio' class='custom-control-input' id='defaultGroupExample2'  name='ans' value='b'>
                                <label class='custom-control-label' for=defaultGroupExample2>".$row["opt2"]."</label></br>
                            </div>
                            <div class='custom-control custom-radio'>
                                <input type='radio' class='custom-control-input' id='defaultGroupExample3'  name='ans' value='c'>
                                <label class='custom-control-label' for=defaultGroupExample3>".$row["opt3"]."</label></br>
                            </div>
                            <div class='custom-control custom-radio'>
                                <input  type='radio' class='custom-control-input' id='defaultGroupExample4' name='ans' value='d'>
                                <label class='custom-control-label' for=defaultGroupExample4>".$row["opt4"]."</label></br>
                            </div>
                            <button name='submit' class='next'>NEXT</button>
                        </div>
                    </div>
                </div>
            </div>
            ";
        $count++; //increment the counter

    }// End While

    } else {
        echo "Currently Unavailable";
    }

    $conn->close();

?>
<!-- include jQuery -->
<script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>


<script>
//Set event handler for next buttons
$(".next").on("click",function(){
    hide_current_question($(this)); //hide current question
    show_next_question($(this)); //show the next question
});

function hide_current_question(element){
    //find the parent with class of 'question-container' and hide it;
    element.closest(".question-container").hide();
}

function show_next_question(element){
    //find the parent with class of 'question-container' and then show the next element with class of 'question-container' 
    element.closest(".question-container").next(".question-container").show();
}

function show_previous_question(element){
    //find the parent with class of 'question-container' and then show the previous element with class of 'question-container' 
    element.closest(".question-container").previous(".question-container").show();
}
</script>
<!-- END -->

主要更改：

为每个问题在最外面的div中添加了一个“问题容器”类
添加了一个计数器，用于解决您在for循环中遇到的问题。
~~添加了ternary operator逻辑来设置用于隐藏不是第一个问题的样式的样式~~
添加了if语句逻辑来设置用于隐藏不是第一个问题的样式的样式
包含的jQuery库
为下一个按钮添加了事件处理程序逻辑，以显示下一个问题并隐藏上一个问题。
添加了javaScript函数以提高可读性

如果您有任何问题，请告诉我。

一次显示一个数据库中的记录

1 个答案: