jQuery Hide&显示建立测验 [英] Jquery hide & show to build quiz

问题描述

我正在尝试使用jquery hide&做一个简单的测验.显示功能，首先我创建了一些divs元素，其中将包含问题+最后一个元素将包含文本&观看结果的按钮(不会有结果)；我正在使用两个按钮:下一步"和上一页.

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

1-当两个按钮显示最后一个div(结果是！)时，将其隐藏起来；

2-使上一个按钮在第一个问题上停止.

3-我如何使用Jquery实施引导单选选项以存储答案&单击按钮最后显示它们.

  $(document).ready(function(){$(.divs div").each(function(e){如果(e！= 0)$(this).hide();});$(#next").click(function(){如果($(.divs div:visible").next().length！= 0)$(.divs div:visible").next().show().prev().hide();别的 {$(.divs div:visible").hide();$(.divs div:first").show();}返回false；});$(#prev").click(function(){如果($(.divs div:visible").prev().length！= 0)$(.divs div:visible").prev().show().next().hide();别的 {$(.divs div:visible").hide();$(.divs div:last").show();}返回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>  

先谢谢大家！

解决方案

JSFiddle

HTML :

 < div class ="divs">< div class ="cls1">性别< input type ="radio" name ="sex" value ="male"> Male< br>< input type ="radio" name ="sex" value ="female">女性</div>< div class ="cls2">语言< br/>< input type ="radio" name ="language" value ="java"> Java< br>< input type ="radio" name ="language" value ="python"> Python</div>< div class ="cls3">偏好<输入type ="radio" name ="preference" value ="morning">早晨< br>< input type ="radio" name ="preference" value ="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){如果(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.隐藏两个按钮$(#next，#prev").hide();//3.显示结果var divs = $(.divs div:visible").prevAll().clone();divs.show();//颠倒顺序var divs = jQuery.makeArray(divs);divs.reverse();$(.your-quiz-result").空的().append(divs);}}返回false；});$(#prev").click(function(){if($(.divs div:visible").prev().length！= 0){console.log(还有元素");$(.divs div:visible").prev().表演().下一个().隐藏();}别的 {//2.不能去上一个第一格console.log(无法进入上一个第一个div")；}返回false；});}); 

i'm trying to make a simple quiz using jquery hide & show functions , first i created some divs elements wich will be the questions + the last elements will contain a text & a button to watch result (there will be no result) ; i'm using two buttons : next & prev .

So the things i can't do on my own are :

1- hide the two buttons when they show the last div (Of the result !) ;

2-make the prev buttons stop on the first question .

3- how i can implement bootstrap radio options with Jquery to store answers & show them at the last on the click of button.

$(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>

Thanks in advance guys !

解决方案

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 Hide&显示建立测验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！