普通网友 2015-04-04 08:19
浏览 31
已采纳

如何在点击按钮上显示一个分区并同时隐藏另一个分区？

I want to create a Quiz. For that I have multiple choice questions. I dont want to show all the questions on the same page at a time. I want that only one question should be displayed at a time and when button is clicked, question in next division should appear and previous question should hide. At last, when user submits the last question, it should take it to the results page that would be basic php. But how to do that show/hide part? I am a newbie in these. Please don't take me as a professional.

here's my code.

    <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>
  • 写回答

4条回答 默认 最新

  • dongyixiu3110 2015-04-04 09:02
    关注

    I would recommend to add a class to the div elements, but just as working example for your current markup using jQuery, following example Fiddle for the show/hide part.

    Hide all div sections with CSS, display the first div initially, and when the button is clicked, hide all div elements and display the next div based on the index of the current div in case it's not the last div / question.

    CSS:

    div {
  display:none;
}

    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");
    }
  });
});

    I've tried to add this as stack snippet but for reasons unknown didn't get it to work, therefore above Fiddle instead.

    Update: For the additional question in the comment, you can e.g. save the value of each answer as data attribute like this:

    $(document).ready(function () {
  $("div:eq(0)").show();
  $("button").click(function () {
    var questions = $("div").length;
    var current = $(this).parent("div").index();
    var answer = $(this).parent("div").find("input:checked").val();
    alert(answer);
    $(this).parent("div").data("answer", answer);
    $("div").hide();
    if (current < questions - 1) {
        $("div:eq(" + (current + 1) + ")").show();
    } else {
        var answers = [];
        $("div").each(function(i){
        answers[i] =  $(this).data("answer");
        });
        console.log(answers);
        alert("no questions left, go to results");
    }
  });
});

    and then loop over all question div elements to fetch the values and add them to an array for further processing / checking if each answer is true or not. Updated Fiddle displaying the array as console log message.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 微信会员卡接入微信支付商户号收款
  • ¥15 如何获取烟草零售终端数据
  • ¥15 数学建模招标中位数问题
  • ¥15 phython路径名过长报错 不知道什么问题
  • ¥15 深度学习中模型转换该怎么实现
  • ¥15 HLs设计手写数字识别程序编译通不过
  • ¥15 Stata外部命令安装问题求帮助！
  • ¥15 从键盘随机输入A-H中的一串字符串，用七段数码管方法进行绘制。提交代码及运行截图。
  • ¥15 TYPCE母转母，插入认方向
  • ¥15 如何用python向钉钉机器人发送可以放大的图片？