Question

我正在使用jquery进行某种动态测验。我目前正在使用相同的按钮隐藏/显示div。所以，例如，我在html中有这个：

<div id="div1" class="question">
<div id="div2" class="question">
<div id="div3" class="question">
<div id="div4" class="question">
<div id="div5" class="question">

<button type="button" onclick="GetSelectedItem()" id="next">Next</button>

这是jquery部分：

$(document).ready(function (){

$('#div2, #div3, #div4, #div5').hide();
$('#next').click(function(){
     //code
});
});

使用'#next'按钮我想浏览每个div，所以当我按下它时会隐藏前一个div并显示下一个div，依此类推。有人能指出我正确的方向吗？感谢

Answer 1

首先，你的HTML中有错误，你没有关闭div

这应该让你开始：

http://jsfiddle.net/crZ69/

HTML

<div id="div1" class="question">q1</div>
<div id="div2" class="question">q2</div>
<div id="div3" class="question">q3</div>
<div id="div4" class="question">q4</div>
<div id="div5" class="question">q5</div>

<button type="button" onclick="GetSelectedItem()" id="next">Next</button>

JQUERY

var qCount = 1;

$('.question').hide();

$('#next').click(function(){
    $('.question').hide();
    $('#div' + qCount).show() ;   
    qCount = qCount + 1;

    if(qCount == 6){ qCount = 1;}
});

Answer 2

你可以创建一个索引来跟踪open div并在你点击按钮时增加它，隐藏所有的div然后只显示“next”。

$('#div2, #div3, #div4, #div5').hide();
var idx = 0;
$('#next').click(function () {
    idx++;
    if (idx < $('.question').length) $('.question').hide();
    $('.question').eq(idx).show();
});

<强> jsFiddle example

Answer 3

你可以尝试这样的事情（假设你的所有问题都有question类而没有其他事情）：

$('#next').click(function(){
    var curr = $(".question:visible");
    curr.next(".question").show();
    curr.hide();
});

请参阅here

请注意，您可以检查next()返回的值，以处理测验的结束。

这是example，当您转到最后一个问题时会停用下一个按钮。

Answer 4

这会使用current CSS类来跟踪当前问题的可见性，并稍微整理HTML以使用不显眼的Javascript - http://jsfiddle.net/ZqTsv/

HTML：

<div id="div1" class="question current">Question 1</div>
<div id="div2" class="question">Question 2</div>
<div id="div3" class="question">Question 3</div>
<div id="div4" class="question">Question 4</div>
<div id="div5" class="question">Question 5</div>

<button type="button" id="next">Next</button>

CSS：

.question {
    display: none;
}

.question.current {
    display: block;
}

jQuery的：

$("#next").click(function () {
    if ($(".current").next(".question").length) {
       $(".current").removeClass("current").next(".question").addClass("current");     
    }    
});

Answer 5

令人惊讶的是，不同的人提出了多种不同的解决方案。这是我的：

首先修复你的html，所以div有内容。

这是我建议的javascript：

var idx = 0;
$(document).ready(function (){
    var qs = $('.question');
    qs.hide();
    qs.first().show();
    $('#next').click(function(){
       idx++;
       if( idx >= qs.length ) idx = 0;
       qs.hide();
       qs.eq(idx).show();
    });
});

Fiddle

Answer 6

I did something

我认为这对你有用=）

Jquery使用相同的按钮隐藏/显示多个div

6 个答案: