Javascript 如何在单击按钮时显示一个分区，同时隐藏另一个分区？_Javascript_Php_Jquery_Html

Javascript 如何在单击按钮时显示一个分区，同时隐藏另一个分区？

javascript php jquery html

Javascript 如何在单击按钮时显示一个分区，同时隐藏另一个分区？,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我想创建一个测验。为此，我有多项选择题。我不想一次在同一页上显示所有问题。我希望一次只显示一个问题，当点击按钮时，下一部分中的问题应该出现，上一个问题应该隐藏。最后，当用户提交最后一个问题时，应该将其带到结果页面，该页面将是基本php。但如何显示/隐藏该部分？我是这方面的新手。请不要把我当作专业人士这是我的密码 <html> <body> <div id="div1"> <input type="radio" name="q

我想创建一个测验。为此，我有多项选择题。我不想一次在同一页上显示所有问题。我希望一次只显示一个问题，当点击按钮时，下一部分中的问题应该出现，上一个问题应该隐藏。最后，当用户提交最后一个问题时，应该将其带到结果页面，该页面将是基本php。但如何显示/隐藏该部分？我是这方面的新手。请不要把我当作专业人士

这是我的密码

    <html>
<body>
    <div id="div1">
    <input type="radio" name="que1" value="Option1">
    <input type="radio" name="que1" value="Option2">
    <input type="radio" name="que1" value="Option3">
    <input type="radio" name="que1" value="Option4">
    <button id ="button1">Next</button>
    </div>

    <div id="div2">
    <input type="radio" name="que2" value="Opt1">
    <input type="radio" name="que2" value="Opt2">
    <input type="radio" name="que2" value="Opt3">
    <input type="radio" name="que2" value="Opt4">
    <button id ="button2">Next</button>
    </div>
    <div id="div3">
    <input type="radio" name="que3" value="1">
    <input type="radio"  name="que3"value="2">
    <input type="radio"  name="que3"value="3">
    <input type="radio"  name="que3" value="4">
    <button id ="button3">Next</button>
    </div>
</body>
</html>


下一个
下一个
下一个

希望您能够用一个问题展示第一页。现在使用按钮id作为问题的下一个div id。如果单击了id为2的“下一步”按钮，则会显示id为2的下一个div，剩余的div&按钮小于3或大于3将被隐藏。最后，您可以通过显示“最后一次完成”按钮的id来确定最后一页。

我建议向

div

元素添加一个类，但就像使用jQuery的当前标记的工作示例一样，下面是显示/隐藏部分的示例

使用CSS隐藏所有

div

部分，最初显示第一个

div

，单击按钮时，隐藏所有

div

元素，并根据当前

div

的索引显示下一个

div

，以防它不是最后一个

div

问题

CSS:

jQuery：

$(document).ready(function () {
  $("div:eq(0)").show();
  $("button").click(function () {
    var questions = $("div").length;
    var current = $(this).parent("div").index();
    $("div").hide();
    if (current < questions - 1) {
        $("div:eq(" + (current + 1) + ")").show();
    } else {
        alert("no questions left, go to results");
    }
  });
});

然后循环所有问题

div

元素以获取值并将其添加到数组中，以便进一步处理/检查每个答案是否正确。已更新将阵列显示为控制台日志消息。

此操作有效（）我对您的html做了一些更改，请看这里：

<body>
    <div class = "question">
    First Question
    <input type="radio" name="que1" value="Option1">
    <input type="radio" name="que1" value="Option2">
    <input type="radio" name="que1" value="Option3">
    <input type="radio" name="que1" value="Option4">
    <button class = "btn-next" data-question-number = "1">Next</button>
    </div>

    <div class = "question">
    Second Question
    <input type="radio" name="que2" value="Opt1">
    <input type="radio" name="que2" value="Opt2">
    <input type="radio" name="que2" value="Opt3">
    <input type="radio" name="que2" value="Opt4">
    <button class = "btn-next" data-question-number = "2">Next</button>
    </div>
    <div class = "question">
    Third Question
    <input type="radio" name="que3" value="1">
    <input type="radio"  name="que3"value="2">
    <input type="radio"  name="que3"value="3">
    <input type="radio"  name="que3" value="4">
    <button  class = "btn-next" data-question-number = "3">Next</button>
    </div>

jquery:

//show the first question on the page loads
$("button.btn-next").eq(0).parent().fadeIn()

$(".btn-next").on("click", function(){
    var question_number = $(this).data("question-number")
    // question_number = index + 1
    var next_question = $("button.btn-next").eq(question_number).parent()

    if(question_number < $(".question").length){
        var parent_row =$(this).parent()

        parent_row.hide()
        next_question.fadeIn()

    }else{
        //your logic here           
    }
});

//在页面上显示第一个问题
$（“button.btn next”）.eq（0.parent（）.fadeIn（）
$（“.btn next”）。在（“单击”，函数（）{
变量问题编号=$（此）.data（“问题编号”）
//问题编号=索引+1
var next\u question=$（“button.btn next”）.eq（问题编号）.parent（）
如果（问题编号<$（“.question”）。长度）{
var parent_row=$（this）.parent（）
父行隐藏（）
下一个问题
}否则{
//你的逻辑在这里
}
});

这是我的尝试。只要有可能，就会对代码进行注释

//这是$（document）.ready（…）的缩写
$（函数（）{
//将问题存储在变量中
变量$questions=$（'.question'）；
//显示第一个问题
$questions.first（）.show（）；
//当单击问题的输入框时。。。
$questions.find（'button'）。在（'click'，function（）上{
//…存储当前可见的问题，然后。。。
var$visibleQuestion=$questions.filter（“：visible”）；
//…如果还有下一个问题。。。。
var$nextQuestion=$visibleQuestion.next（'.question'）；
console.log（$nextQuestion）；
如果（$nextQuestion.length==1）{
//…隐藏可见的问题。。。。
$visibleQuestion.hide（）；
//…然后展示下一个。
$nextQuestion.show（）；
}
//如果您愿意，您可以在本节中查看测验完成情况
否则{
//测验结束
警惕（“你完成了测验！”）；
}
});
//（可选）更改最后一个问题按钮的文本
$questions.last（）.find（'button'）.text（'Finish quick'）；
});
/*最初隐藏所有问题，稍后我们将使用JavaScript显示这些问题*/
.问题{显示：无}

下一个
下一个
下一个
我实现了您的代码。它运行得很完美，但最后如何获取值。？我的意思是，一旦记录下所有响应，那么如何获取每个响应的值，然后检查答案是否正确？也就是说，如何在其中添加一个表单，并将其带到“results.php”页面，在该页面上显示所有响应。在php中。。比如这里@AshwiniPurohit刚刚更新了我的答案，建议将给定的答案存储为数据属性值。但最后它应该在名为“result.php”的不同页面上显示所有值。如何将所有值存储并显示到不同的页面。您正在使用javascript存储值。我需要存储在php变量中。@AshwiniPurohit请不要弄错，但这更像是一个不同的/后续问题。你最初的问题是显示/隐藏部分。对于php变量：当前（按照建议的方法），当所有问题都得到回答时，您将在一个数组中拥有一个答案值数组。下一步是检查答案是否正确。您可以使用第二个数组和正确答案的值进行比较，然后相应地填充php变量。但是如何获取所有值呢？我的意思是，我想在“result.php”页面上显示所有提交的响应。如何获取页面上所有提交的响应结果。PHP？发布PHP代码，并考虑如果它对你有用的话接受答案。我的结果。PHP代码应该显示所有的响应。我的目标是做一个小测验，最后输出他们的分数。怎么做？不可能。我想做个小测验。然后将结果显示到result.php。
<body>
    <div class = "question">
    First Question
    <input type="radio" name="que1" value="Option1">
    <input type="radio" name="que1" value="Option2">
    <input type="radio" name="que1" value="Option3">
    <input type="radio" name="que1" value="Option4">
    <button class = "btn-next" data-question-number = "1">Next</button>
    </div>

    <div class = "question">
    Second Question
    <input type="radio" name="que2" value="Opt1">
    <input type="radio" name="que2" value="Opt2">
    <input type="radio" name="que2" value="Opt3">
    <input type="radio" name="que2" value="Opt4">
    <button class = "btn-next" data-question-number = "2">Next</button>
    </div>
    <div class = "question">
    Third Question
    <input type="radio" name="que3" value="1">
    <input type="radio"  name="que3"value="2">
    <input type="radio"  name="que3"value="3">
    <input type="radio"  name="que3" value="4">
    <button  class = "btn-next" data-question-number = "3">Next</button>
    </div>

.question{
    display:none;
}

//show the first question on the page loads
$("button.btn-next").eq(0).parent().fadeIn()

$(".btn-next").on("click", function(){
    var question_number = $(this).data("question-number")
    // question_number = index + 1
    var next_question = $("button.btn-next").eq(question_number).parent()

    if(question_number < $(".question").length){
        var parent_row =$(this).parent()

        parent_row.hide()
        next_question.fadeIn()

    }else{
        //your logic here           
    }
});