2

我正在使用 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 并显示下一个，依此类推。谁能指出我正确的方向？谢谢

4

6 回答 6

3

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

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

看这里

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

这是一个示例，当您到达最后一个问题时禁用下一个按钮。

于 2013-03-18T15:41:27.757 回答
2

首先，您的 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>

查询

var qCount = 1;

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

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

    if(qCount == 6){ qCount = 1;}
});
于 2013-03-18T15:39:02.770 回答
2

您可以创建一个索引来跟踪打开的 div 并在单击按钮时增加它，隐藏所有 div，然后只显示“下一个”。

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

jsFiddle 示例

于 2013-03-18T15:39:08.420 回答
1

这使用currentCSS 类来跟踪当前问题以实现可见性，并稍微整理 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");     
    }    
});
于 2013-03-18T15:45:52.623 回答
0

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

首先修复您的 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();
    });
});

小提琴

于 2013-03-18T16:12:30.017 回答
0

我做了什么

我觉得对你有用=）

于 2013-03-18T16:16:52.190 回答