Jquery 隐藏和显示以构建测验

Question

我正在尝试使用 jquery 隐藏和显示功能做一个简单的测验，首先我创建了一些 divs 元素，这些元素将是问题 + 最后一个元素将包含文本 &一个查看结果的按钮（不会有结果）；我正在使用两个按钮：下一个和上一个。

所以我不能自己做的事情是：

1- 当两个按钮显示最后一个时隐藏它们 div （结果！）;

2-让上一个按钮在第一个问题上停止。

3- 我如何使用 Jquery 实现 bootstrap 单选选项来存储答案并在最后单击按钮时显示它们。

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

<div class="divs">
     <div class="cls1">1</div>
     <div class="cls2">2</div>
     <div class="cls3">3</div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

提前谢谢大家！

Answer 1

JSFiddle

HTML:

<div class="divs">
     <div class="cls1">
       Gender<br/>
       <input type="radio" name="sex" value="male">Male<br>
       <input type="radio" name="sex" value="female">Female
     </div>
     <div class="cls2">
       Language<br/>
       <input type="radio" name="language" value="java">Java<br>
       <input type="radio" name="language" value="python">Python
     </div>
     <div class="cls3">
        Preference<br/>
        <input type="radio" name="preference" value="morning">Morning<br>
        <input type="radio" name="preference" value="night">Night       
     </div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
     <div class="your-quiz-result"></div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

JavaScript:

$(document).ready(function(){
    $(".divs > div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0){
            $(".divs div:visible").next().show().prev().hide();

            if($(".divs div:visible").next().length == 0){
                //1. Hide the two buttons
                $("#next, #prev").hide();

                //3. Show the results
                var divs = $(".divs div:visible").prevAll().clone();
                divs.show();

                //Reverse the order
                var divs = jQuery.makeArray(divs);
                divs.reverse();
                $(".your-quiz-result")
                    .empty()
                    .append(divs);
            }
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0){
            console.log("There are still elements");
            $(".divs div:visible")
                .prev()
                .show()
                .next()
                .hide();
        }
        else {
            //2. Can't go previous first div
            console.log("Can't go previous first div");
        }
        return false;
    });
});

Jquery 隐藏和显示以构建测验

Jquery hide & show to build quiz

javascript

jquery

show

hide