Hide current element and show the next one

前端未结

关注

 2  1639

I\'m creating a ASP.NET application where shows you a quiz. This quiz should be show to the user displaying question by question.

I mean, appears the first question and

相关标签:

2条回答

日久生厌

2021-01-23 18:47

I know you have already got an answer to this. I do something very close to this in one of my sites. This counts your divs and shows the next button until you reach the last div and then it removes the button. I rewrote it to include your code above.

    <!DOCTYPE html>
<html lang="en">
  <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
    { 
    var Called = 1;
    var TotalDiv = $(".question").length;
    $(".question").filter(":first").css("display","block"); 
    $(".reveal").click(function()
        {
        Called++;
        $("#questions-container").find(":visible").hide().next().show();
        if(Called == TotalDiv)
            {
            $(this).hide();
            }
        });
    });
</script>
<style type="text/css">
.question{display:none;}
</style> 
  </head>
  <body>
<div id="questions-container">
    <div class="question">
     division one
    </div>
    <div class="question">
     division two
    </div>
    <div class="question">
     division three
    </div>
    <div class="question">
     division foor
    </div>  
</div>
<input type="button" class="reveal" value="NEXT" />
  </body>
</html>

0 讨论(0)

梦如初夏

2021-01-23 19:07
Default all questions to display: none;, show the first one when the page loads (or with another class .question.first that has display: block;, and then the next button can show the next question with:
```
$("#questions-container").find(":visible").hide().next().show();
```
0 讨论(0)
发布评论:

提交评论
- 加载中...